为什么我不能从 ReactDOM.render() 回调中获得对我的组件的引用？

Question

我有以下代码：

const priceCalculator = ReactDOM.render(<PriceCalculator />, reactHolder);

我需要priceCalculator稍后在我的代码中使用，但 ESLint 抱怨我不应该使用ReactDOM.render(). 这时候，我发现，你可以传递第三个参数到ReactDOM.render()这是一个回调。太好了，我以为...

ReactDOM.render(<PriceCalculator />, reactHolder, function(priceCalculator) {
    // do something with priceCalculator
});

但priceCalculator未定义。在调试器中，我暂停了异常并发现this当我在这个函数中时它被设置为我的 React 组件。所以我重写了...

ReactDOM.render(<PriceCalculator />, reactHolder, function() {
    const priceCalculator = this;
    // do something with priceCalculator
});

它仍然未定义。这是怎么回事？

我正在使用 Webpack 编译 es6 React 代码（使用 babel）。

Answer 1

在您链接的ESLint 文档页面中，它说要使用回调引用：

ReactDOM.render() 当前返回对根 ReactComponent 实例的引用。然而，使用这个返回值是遗留的，应该避免，因为在某些情况下，React 的未来版本可能会异步渲染组件。如果您需要对根 ReactComponent 实例的引用，首选的解决方案是将回调引用附加到根元素。

来源：React 顶级 API 文档

因此，您可以通过 prop 将回调传递给根组件render，并通过根节点的refprop从其方法中引用组件的根节点来调用它。

例如（工作小提琴）：

class Hello extends React.Component {
  render () {
    return (
      <div ref={(node) => this.props.cb(node)}>
        Hello {this.state.name}
      </div>
    )
  }
}

let node

ReactDOM.render(<Hello cb={(n) => node = n} />, ...);

console.log(node)

注意：这种方法很幼稚，因为ReactDOM.render可能并不总是同步呈现，在这种情况下，console.log语句将打印"undefined"。（请参阅上面的引用：“在某些情况下，React 的未来版本可能会异步渲染组件”。）