关于 reactjs 中 refs 回调的问题（ES6 与非 ES6）答案

【问题标题】：Questions about refs callback in reactjs (ES6 vs non ES6)关于 reactjs 中 refs 回调的问题（ES6 与非 ES6）
【发布时间】：2016-01-20 05:37:30
【问题描述】：

我一般理解 refs 如何使用它来访问 DOM。但是当它谈到回调时，我真的很困惑。

总而言之，它说（我在这里解释）“回调函数在安装组件时被调用..它使用引用的组件传递给渲染中回调的参数”。我对此感到非常困惑。

所以在他们的例子中：

render: function() {
    return (
        <TextInput
            ref={function(input) {
                if (input != null) {
                    input.focus();
                }
           }} />
    );
},

那么当“输入”被调用时，它的值是多少。是否是以下的反应组件：

<TextInput />

我还假设它实际上是一个包装器：

<input type="text" />

否则 focus() 将无法正常工作？

我的下一个问题是，ComponentDidMount 生命周期是在渲染生命周期的 ref 中提到的回调之前执行还是之后执行？

因为然后我看到了这个例子（它看起来与非 es6 标准完全不同......它让我失望）

render: function() {
    return <TextInput ref={(c) => this._input = c} />;
},
componentDidMount: function() {
    this._input.focus();
},

也就是说，如果您不使用 ES6，则逻辑（即 input.focus()）将在渲染生命周期中找到的回调中找到。但是，如果您使用的是 ES6，则将该逻辑移至 componentDidMount 生命周期。

所以我正在考虑使用 ES6 标准，首先调用回调，将引用的组件（我假设是 TextInput）设置为一个名为“_input”的新别名，稍后在 componentDidMount 中识别和使用，即使它没有在其他任何地方声明。

我在这一切中正确吗？

还有一个问题，如果我使用的是非 ES6 标准，我将如何完成让 componentDidMount 执行 ES6 示例中描述的逻辑的相同任务？就像我要这样做..

render: function() {
    return (
        <TextInput
            ref={function(c) {
                this._input = c;
           }} />
    );
},
componentDidMount: function() {
    this._input.focus();
},

还是我错了？

【问题讨论】：

标签： reactjs callback

【解决方案1】：

为了使您的示例正常工作，您需要将bind this 绑定到ref-callback，因为React.createClass 会自动将this 绑定到道具，而不是回调函数。

render: function() {
    return (
        <TextInput
            ref={function(c) {
                this._input = c;
           }.bind(this)} />
    );
},
componentDidMount: function() {
    this._input.focus();
},

否则ref里面的this就是undefined

<TextInput
   ref={function(c) {
     console.log(this); // undefined
     this._input = c;
 }} />

在 ES6 示例中，arrow function 为您处理 this 的词法绑定。

JSFiddle

【讨论】：

哇，这真的很有意义.. 你也能解释一下生命周期吗，回调是否发生在 componentDidMount 之前？还是之后？文献说它发生在安装组件之后。并且“c”的值是反应组件TextInput吗？
@sksallaj 引用回调发生在组件安装后。由于 c 中的指代已挂载节点（自 0.14 起）本身，所以 this._input 在此之前是 undefined。您可以在componentDidMount 和componentWillMount 生命周期方法期间通过console.log:in this._input 对其进行测试。
感谢您的帮助，您让我更容易理解这个主题。那个教程中的文献让我很困惑，谢谢你把事情弄清楚。