React.jsレンダリング条件付きで

Question

私はReactを新しくしました。私はページへのA

ページにBをレンダリングをレンダリング

のようなものを見せたい

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')); 

：私はreactDomでレンダリングする上でいくつかの問題を持っていますB 問題は、AとBをindex.jsで定義すると、ページA（ここでelementId Bはありません）では、Reactにはeがないため、以下のようなエラーが表示されますlementId Bは、ページ上の

無効な違反の登録コンポーネントターゲットコンテナは、あまりにもそれを修正することができReact and Browserify Register Component Errorのようなパスで確認する、またはrenderを呼び出す前に（存在するか）elementidをチェックするDOM要素

ではありません。

これがこのようなケースを解決する正しい方法であるかどうかを知りたいのですが、別の方法がありますか？

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 />を表示しません。