将this.refs作为属性传递给React.js中的jsx

Question

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

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

但是在Popover中,this.props.trigger为NULL.

我的代码有什么问题吗？

如何将node-ref作为属性传递给另一个React组件？

Answer 1

你误解了React中的组件生命周期.看到这里:链接

看到这个小提琴.https://jsfiddle.net/uzvoruf7/
打开您的控制台,检查"Composite"组件的代码,并查看生命周期钩子.

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-references表示必要的思考过程,而不是React方式.我建议改进,但我不知道你的用例.