javascript - 在这个简单的例子中，在 componentDidMount() 之后使用 findDOMNode() 找不到 `ref`

Question

有谁明白为什么在下面的示例中我无法使用 findDOMNode 和 this.refs.foo 获取引用 foo？据我所知 foo 应该在 componentDidMount 之后可用？我该怎么做才能做到这一点？ (我正在使用 React 15.2.1)

class PageComp extends React.Component {
  render() {
    return (
      <div>
        <WrapperComp>
          <div ref="foo">item</div>
          <div>item</div>
        </WrapperComp>
      </div>
    );
  };
}

class WrapperComp extends React.Component {

  componentDidMount() {
    const tryNode1 = ReactDOM.findDOMNode(this.refs.foo);
    const tryNode2 = this.refs.foo;
    console.log(tryNode1);
    console.log(tryNode2);
  }

  render() {
    return (
      <div>
        { this.props.children }
      </div>
    );
  }
}


ReactDOM.render(
  <PageComp />,
  document.getElementById('app')
);

JSBIN

Answer 1

@Alexander T 的评论是正确的。

此外，访问 DOM 元素的推荐方法是使用回调引用。 (阅读此处红色的“注释”:https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute)

例如使用您的 PageComp 组件:

class PageComp extends React.Component {

  componentDidMount() {
     // use this.foo here at will
  }

  render() {
    return (
      <div>
        <WrapperComp>
          <div ref={(el) => this.foo = el}>item</div>
          <div>item</div>
        </WrapperComp>
      </div>
    );
  };
}

这会将 this.foo 设置为该元素，而不使用 findDOMNode