JSONファイルを読み込んでそれを表現するグラフィカルなツリービュー

Question

こんにちは、私はReact JSを使ってWeb開発を始めたばかりで、以下の疑問があります。

Jsonオブジェクトのデータを、リアクションjsを使用してUI側のツリービューなどのグラフィカルビューに表示する方法また、双方向バインディングも必要です。ユーザーがUIで変更を行った場合、元のJsonオブジェクトでも同様にレンダリングする必要があります。あなたが望むよう

Answer 1

次の例のように、あなたのJSONツリーを表すことができる - あなたはdiv要素のコレクションを使用して構造を「描く」ことができます。 json配列を使ってマッピングし、UIを表現することができます。次のようなものがあります。

render() { 
    return (
     <div className="entities"> 
     { 
      this.props.myObjects.map((obj, index) => 
      { 
      return <Link key={index} to={`/somepath/${index}`} > 
      <div><p>{obj.name}</p></div></Link> 
      }) 
     } 
     </div> 
    ); 
    } 

親のdivには赤い背景があり、入れ子のdivにはインデントと背景色があります。あなたの質問は具体的なものではありません。あなたは何をしたいですか？

リアクションの性質は双方向のデータバインドには対応していません。ユーザーがデータを変更する場合は、手動でデータを保存する必要があります。もしあなたがReduxを使うのであれば、これは大きな問題ではありません。