为什么`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)