React.js renderDOM有條件地

Question

我是React的新手。我有一些問題與reactDom渲染：

index.js

import ReactDOM from 'react-dom'; 
import A from 'components/A'; 
import B from 'components/B'; 

render(<A />, document.getElementById('A')); 
render(<B />, document.getElementById('B')); 

我想告訴像

• 呈現一個頁面一個

• 呈現B到頁B 問題是當我在index.js上定義A和B時，所以在頁面A上（這裏沒有elementId B），它會顯示如下的錯誤，因爲React沒有e lementId乙頁面上的

  無效衝突註冊元器件目標容器不是一個DOM元素

通過路徑檢查等React and Browserify Register Component Error可以修復它太，或調用render之前檢查elementid（存在與否）。

我想知道這是解決這種情況的正確方法，還是有另一種方式？

Answer 1

嘗試這樣：

if (document.getElementById('A')) { 
    render(<A />, document.getElementById('A')); 
} 

if (document.getElementById('B')) { 
    render(<B />, document.getElementById('B')); 
} 

這是你的問題的最簡單，最簡單的解決方案（這不是最乾淨的，也不是最好的解決方案，但它是最容易學習反應過來的時候，瞭解它如何與工作DOM）。如果它找不到A容器，它將不會渲染<A />，如果容器找不到B容器，它將不會渲染<B />。