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

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/
打开控制台，检查 "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')
);

"refs" 在 DOM 被渲染后活跃起来。

因此，在 return 语句中，dom 尚未呈现，因此引用为空（或所有引用可以说是空的）。

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

这是一个常见错误：可能存在需要重构的代码异味。通常（并非总是），向下传递 dom-references 表示命令式思维过程，而不是 React 方式。我会建议改进，但我不知道你的 use-case。

Answer 2

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

Reference material

您一定是在使用旧版本的 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 是您的触发值。如果它 returns 为真，那么您将呈现 Popover。如果没有，你摧毁它。这两种情况都将在 Popover 内部处理，但不需要触及 div

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

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

Pass this.refs as property in jsx in React.js

javascript

reactjs

react-jsx

Reference material

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

Pass this.refs as property in jsx in React.js

javascript

reactjs

react-jsx

Reference material

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