javascript - 在 React.js 中将 this.refs 作为属性传递给 jsx

Question

我正在尝试将 1 个节点作为另一个 React 组件的属性传递，如下所示:

  render: function() {
    return (
      <div>
        <div ref='statusCircle'></div>
        <Popover trigger={ this.refs.statusCircle }></Popover>
      </div>);
    );
  }

但在 Popover 中，this.props.trigger 为 NULL。

我的代码有什么问题吗？

如何将节点引用作为属性传递给另一个 React 组件？

Answer 1

您误解了 React 中的组件生命周期。看这里:Link

请看这个 fiddle 。 https://jsfiddle.net/uzvoruf7/
打开您的控制台，检查“复合”组件的代码，并查看生命周期 Hook 。

var Popover = React.createClass({
  render: function() {
    return (<div>This is a pop-over</div>);
  }
});

var Composite = React.createClass({
  componentDidMount: function() {
    console.log(this.refs.statusCircle); //ok, exists.
  },
  render: function() {
    console.log(this.refs.statusCircle); //doesn't exist, sorry.
    return (
      <div>
        <div ref='statusCircle'></div>
        <Popover trigger={this.refs.statusCircle}></Popover>
      </div>
    );
  }
});

ReactDOM.render(
  <Composite />,
  document.getElementById('container')
);

一旦 DOM 被渲染，“refs”就会活跃起来。

因此，在该 return 语句中，dom 尚未呈现，因此引用为空(或者可以说所有引用均为空)。

但是，在 componentDidMount 中，您可以看到您的引用如预期的那样可用。

这是一个常见错误:可能需要重构的代码异味。通常(并非总是)，向下传递 dom 引用是命令式思维过程的指示，而不是 React 方式。我会建议改进，但我不知道您的用例。