javascript - 反応コンポーネントでの仮想 DOM 操作

Question

説明: 私は ReactJS の初心者です;
要件は次のとおりです:
1. 反応コンポーネント aa.jsx

リーリー

2. コンポーネント bb.jsx

に反応します リーリー

3. React のメインの入口である main.jsx は、json ファイルに基づいて必要なコンポーネントをロードする必要があります。 リーリー

しかし問題は、ここのページはすべて関数であるということです。 dom ブロック (p 要素) を取り出し、index.html ページ上の指定された dom 要素に 1 つずつ追加する方法。

Answer 1

まず、私が理解できないのは、aa.jsx と bb.jsx は非常に似ているのに、なぜ 2 つを書くのかということです (もちろん、便宜上サンプルを書いたのかもしれません)。これらは複数の異なるファイルであるため、異なる React コンポーネントであるため、それらをすべて特定の DOM でレンダリングしたい場合は、それらを配列に直接配置するだけです。

以下のコードはテストしていませんが、動作するはずです

リーリー

埋め込む場所、JSXコード

リーリー

いつでも更新したい場合は、再レンダリングするだけで、this.state.components を使用できます

翻訳された React ドキュメントをご覧ください

Answer 2

これはバーチャルダムとは関係ありませんが、なぜこのように使うのかわかりませんが、このように使用するのは間違っています！