爲什麼我不能從ReactDOM.render（）回調中獲得對組件的引用？

我有以下代碼：爲什麼我不能從ReactDOM.render（）回調中獲得對組件的引用？

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）。

來源

2016-12-07 MrMisterMan

'ReactDOM.render'呈現給定的組件到給定的DOM元素中。我相信回調是在完成渲染時調用的。也許你想要的只是'const priceCalculator = '？ – sdgluck

@sdgluck這是我做的第一個，它工作正常。然而，這種方式是不鼓勵的，因爲最終ReactDOM.render可能不會返回任何東西https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-render-return-value.md – MrMisterMan

但是，我建議不使用'ReactDOM.render'，所以這些細節不適用於此？ – sdgluck

在ESLint docs page您鏈接它說，使用callback ref：

ReactDOM.render（）返回當前的根ReactComponent實例的引用。但是，使用此返回值是遺留的，應該避免，因爲在某些情況下，未來版本的React可能會異步渲染組件。 如果您需要對根ReactComponent實例的引用，則首選解決方案是將callback ref附加到根元素。

來源：React Top-Level API documentation

所以，你可以通過道具傳遞一個回調到根組件，並從其render方法中引用到組件的根節點調用該方法，通過根節點的ref道具。

例如（working fiddle）：

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的未來版本可能在某些情況下異步渲染組件」）。

來源

2016-12-07 12:15:17 sdgluck

我調整你的小提琴更像是我想要實現https://jsfiddle.net/n92sm5f3/1/它確實工作（太棒了！）但我仍然不明白爲什麼其他方式沒有。我鏈接到的文檔頁面也說'ReactDOM.render（，document.body，doSomethingWithInst）;'應該工作。 – MrMisterMan

是的，它很混亂。也許該功能不再可用，並且文檔已過時 - 是否使用舊版v。React進行了測試？無論哪種方式，這是推薦的方法。 :-) – sdgluck

爲什麼我不能從ReactDOM.render（）回調中獲得對組件的引用？

回答

相關問題