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

看到这个小提琴。https://jsfiddle.net/uzvoruf7/
打开控制台，检查“复合”组件的代码，并查看生命周期挂钩。

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 的方式。我建议改进，但我不知道您的用例。

输入此内容后，我意识到这实际上不是对原始问题的回答，而是对您在上述评论中提出建议的请求的后续行动。如果你真的不相信它应该留下来，我会删除它，但它太大了，无法发表评论，抱歉。

参考资料

您必须使用旧版本的 React，因此一开始这对您来说可能不正确，但是您可以通过执行以下操作使用该父组件中的状态来跟踪该信息

ref={ function ( element ) {

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

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

假设这些值随时间变化，您将需要为该更改添加一个事件侦听器（可以在该ref设置中添加），setState并在您需要重新渲染时再次运行它。

至于<Popover trigger=你想要做的事情是：

<Popover trigger={this.state.circleWidth > 999} />

...其中 999 是您的触发值。如果它返回 true，那么你渲染 Popover。如果没有，你就摧毁它。这两种情况都将在 Popover 内处理，但不需要触及div

当然，React 中的好做法是在顶部进行比较render()并将结果放入像isTriggered.