在ReactJS中呈現HTMLDivEle

在我的第一個ReactJS項目中，我已經使用像documents.createElement（...）這樣的函數構造了一個DIV對象。在我的ReactJS項目中，我將這個對象與道具傳遞給另一個組件（我們稱之爲C），在那裏我想渲染所述對象。但是，控制檯告訴我下面的錯誤：在ReactJS中呈現HTMLDivEle

Error: Objects are not valid as a React child (found: [object HTMLDivElement])...

我知道對象是結構化的方式我想，該項目將呈現佔位符文本。爲什麼React不允許我在C的render（）函數中執行以下操作？

return (
    <div key={uuidv4()}> 
    {this.props.divObject} 
    </div> 
);

來源

2017-06-22 Dylan Brown

如果您想要將vdom傳遞給組件，您可能需要考慮使用'props.children'來設計它。 https://facebook.github.io/react/docs/composition-vs-inheritance.html – atomrc

響應代碼適用於virtual DOM，它本質上是一個Javascript對象樹。您正試圖創建一個真正的DOM元素並插入到渲染函數中。雖然看起來您在使用Javascript編寫<div>標籤時使用的是HTML元素，但事實並非如此。這些<div>標籤在JavaScript轉換爲React.createElement函數調用，而不是實際的divs。 html元素的實際創建被抽象出來。

來源

2017-06-22 15:41:47

問題是，您使用document.createElement創建了一個實際的DOM元素。 React只處理虛擬DOM元素，您可以使用React.createElement創建。

這就是說，我認爲有一個更好的方法來實現你正在嘗試使用children屬性。

您的組件的render看起來就像這樣：

return (
    <div> 
    {this.props.children} 
    </div> 
);

而且在父母的組件

return (
<C> 
    <div>I am going to be inserted in `C`'s children props</div> 
</C> 
)

而且，請注意，您不需要key=uuidv4()，因爲這將在每一個改變呈現從而可以消除key屬性的優勢（這是React創建真實DOM和虛擬DOM之間的一對一映射並優化其所做更改的一種方法）

來源

2017-06-22 15:45:58 atomrc

在ReactJS中呈現HTMLDivEle

回答

相關問題