Question

我有以下代码：

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

我需要稍后在我的代码中使用priceCalculator，但ESLint抱怨我不应该使用ReactDOM.render()的返回值。就在那时我发现你可以pass a 3rd argument到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 docs page中，它说要使用callback ref：

ReactDOM.render（）当前返回对根ReactComponent实例的引用。但是，使用此返回值是遗留的，应该避免使用，因为在某些情况下，React的未来版本可能会异步呈现组件。 如果您需要对根ReactComponent实例的引用，首选解决方案是将callback ref附加到根元素。

来源：React Top-Level API documentation

因此，您可以通过prop将回调传递给根组件，并通过其render方法，通过根节点{{{{{{{{{{{{{ 1}} prop。

例如（working fiddle）：

ref

注意：这种方法很幼稚，因为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。（参见上面的引用：＆＃34; React的未来版本可能会在某些情况下异步呈现组件＆＃34;。）

为什么我不能从ReactDOM.render（）回调中获取对组件的引用？

1 个答案: