反應：當我們需要React.Children API時，有什麼用例

只是試圖找到React.Children api的任何用例。閱讀文檔令人困惑。（陣營訴15.2.0）反應：當我們需要React.Children API時，有什麼用例

https://facebook.github.io/react/docs/top-level-api.html#react.children

在這裏，他們說，這是this.props.children'不透明數據結構'。但是在使用chrome開發工具進行調試時，看起來像children是一個數組。所以像React.Children.map或React.Children.toArray這樣的函數沒什麼意義，因爲可以使用Array.prototype.map來代替第一個函數，而最後一個產生的結果與原始的children屬性相同。

對我來說，它看起來像文檔已過時（我沒有使用反應0.14。*，所以我不知道有什麼情況），或者我失去了一些東西。如果有人能解釋，會很高興。

謝謝。

來源

2016-07-13 berliner

React.Children正如文檔解釋的那樣，是組件子項的一組實用程序。在這種情況下（JSX）：

<div> 
    <span>Foo</span> 
    <span>Bar</span> 
</div>

你div的children將是兩點span S的陣列。考慮一個自閉部：

<div> 
    <SomeCustomElement/> 
</div>

在這種情況下，div有一個孩子，但this.props.children在SomeCustomElement將null。因此，試圖撥打this.props.children.map會在某些情況下發生錯誤，因爲children支持不遵循嚴格的鍵入約定。

React.Children做了兩件事。它通過提供一些常用工具「修復」（有些人會說繞過）前面提到的一些常用工具，這些工具可以讓您不在乎this.props.children是否爲null，數組，鍵控片段或其他什麼，因此您不會使用if填充組件，switch等，只是爲了迭代它的孩子。此外，它確保向前兼容性。有爭議的是，更好的方法是堅持嚴格的類型，提供一個空數組而不是null，如果唯一的子元素是一個鍵控片段等等，則該數組具有單個元素。

來源

2016-07-13 14:35:41 Dencker

JavaScript中沒有任何內容是非常不透明的。此處的協議是React團隊認爲children的當前實施方式與實施細節完全相同。

他們告訴你將數據視爲不透明，只能通過他們的React.Children API訪問它，以便他們可以自由地在將來更改底層數據結構，而不必擔心打破現有應用程序。

如果您不使用React.Children API，而是使用底層Array原型方法，那麼您使用的是不受支持的實現細節，並且可能會導致代碼停止使用某個新版本的React。

來源

2016-07-13 14:33:09 Brandon

這兩個答案都很好，但我認爲，Dencker的回答更好地解釋了這個API背後的原因。謝謝！ – berliner

反應：當我們需要React.Children API時，有什麼用例

回答

相關問題