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

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

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

render:function（）{
返回(
);
);
}

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

我的代码有什么问题吗

---

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

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

看这把小提琴
打开控制台，检查“复合”组件的代码，并查看生命周期挂钩

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')
);

var Popover=React.createClass({
render:function（）{
返回（这是一个弹出窗口）；
}
});
var Composite=React.createClass({
componentDidMount:function（）{
console.log（this.refs.statusCircle）；//确定，存在。
},
render:function（）{
console.log（this.refs.statusCircle）；//不存在，抱歉。
返回(
);
}
});
ReactDOM.render(
,
document.getElementById（'容器'）
);

一旦呈现DOM，“引用”就会激活。

因此，在return语句中，dom还没有被呈现出来，因此引用为null（或者说所有引用都为null）

然而，在componentDidMount内部，您可以看到您的引用正如人们所期望的那样可用

---

这是一个常见的错误：可能存在需要重构的代码气味。通常（并非总是），传递dom引用表示一个命令式的思维过程，而不是反应方式。我会提出改进建议，但我不知道您的使用案例。

键入此内容后，我意识到这实际上不是对原始问题的回答，而是对您在上面的评论中请求建议的后续行动。如果你真的不认为它应该保留，我会删除它，但它太大了，无法发表评论，对不起

您必须使用旧版本的React，所以一开始您可能觉得这不合适，但您可以通过执行以下操作，使用父组件中的状态跟踪该信息

ref={ function ( element ) {

    // at the top of render() put
    //    var self = this;

    self.setState({ 
        circleWidth: element.offsetWidth, 
        circleHeight: element.offsetHeight 
    }) 
}

假设这些值随时间变化，您将需要为该变化添加一个事件侦听器（可以添加到

ref

设置中），并在需要重新渲染时再次运行该

setState

---

至于

，谢谢你。检查文档后，我知道引用位于DOM之后。可能我必须使用DOM选择器来代替。@haotang子组件不应该知道父组件的DOM元素，这样子组件就不会与其父组件紧密耦合。您可能想触发一个事件（或提供回调），父组件可以连接并相应地响应该事件。@JuanMendes谢谢您的解释，我同意。问题是
Popover.render（）
需要
的
offsetWidth
和
offsetHeight
。目前，我正在传递
trigger=domselector
，它工作得很好。但这不是我的反应方式。欢迎任何建议：D
<Popover trigger={this.state.circleWidth > 999} />