為什么`this.refs`在這個簡單的例子中返回undefined？

Question

在下面的示例中this.refs.foo.clientWidth返回undefined ，我無法弄清楚原因。 如何在PageComp獲取SomeComp的引用來使用它的寬度？ （使用React 15.2.1或類似）

class PageComp extends React.Component {

  componentDidMount() {
    console.log(this.refs.foo.clientWidth);
  }

  render() {
    return (      
      <div>
      <p>{this.props.name}</p>
      <SomeComp ref="foo" />
      </div>
    );
  }
}

class SomeComp extends React.Component {
  render() {
    return (
      <div>
      <h1>I loaded</h1>
      </div>
    );
  }
}


ReactDOM.render(
  <PageComp name="Joe Schmoe"/>,
  document.getElementById('react_example')
);

JSBIN

Answer 1

this.refs.foo返回React Element。 但是如果你想使用DOM元素 - 你需要找到這個節點

React 15.0.1需要以下語法 ： ReactDOM.findDOMNode(this.refs.foo)

JSBIN： http ：//jsbin.com/xabidaquti/1/edit？html，js，console，output

Answer 2

為了更清晰，如果將refs設置為div ， input等html元素， this.refs.foo.clientWidth將起作用。 因為refs本身會在這樣的html元素的情況下返回DOM節點。

如果refs設定一些反應的組分，那么我們只能訪問使用組件的DOM節點ReactDom.findDOMNode(this.refs.foo)因此我們需要得到clientWidth使用ReactDom.findDOMNode(this.refs.foo).clientWidth 。

參考

Answer 3

試試這個ReactDOM.findDOMNode(this.refs["foo"].clientWidth)