大規模な親データ構造を持つreactjsページコンポーネントを設計する賢明な方法

Question

私はreactjsを使い始めたばかりで、コンポーネントを設計する正しい方法を見つけようとしています。私は、コンポーネント、小道具、州の概念を得ていますが、階層を設計する正しい方法で少し苦労しています。

大きなオブジェクト配列によって駆動されるページがあります。言ってやるよ。

objArr = { 
    param1 : value1, 
    param2: value2, 
    dataArray: [ 
       { key: "keyvalue", a: "a", b: "b", c: "c" }, 
       ... 
      ] 
} 

ページ全体がこのようになっている。このページは、dataArrayに対応する一連のUIコンポーネントを構築します。

UIのいくつかのアイコンがクリックされるたびに、いくつかの変更が必要になり、アイコンはこのdataArrayの値に対応します。 UIの動作に合わせてdataArrayの値が変更されるようにするにはどうすればよいでしょうか？逆も同様で、dataArrayで値が変更されるとUIが変化します。

「可能な限り無制限の状態でコンポーネントを作成する」を読んだことがあります。親コンポーネントレベルでこの処理をどのようにしてフローダウンさせるのですか？

コード例は必要ありません。私のReactJSコードを設計する方法のちょっとした指針は素晴らしく、私はコードを理解するでしょう。

はありがとう

Answer 1

あなたが親コンポーネントのメソッドを結合して、そのように子コンテナにそれを渡している行うことができます：アプリケーションの状態が十分に複雑である

// Our 'pages' that we want to be able to interact with 
const ComponentWIthButtons = ({handleButtonClick, buttons}) => (
    <div> 
     <p>Hey, click one of these</p> 
     {buttons.map(button => (
      <div onClick={()=>handleButtonClick(button.name)}> 
       {button.text} 
      </div> 
     ))} 
    </div> 
) 
// The Parent we want to interact with 
class App extends React.Component { 
    constructor(props){ 
     super(props) 
     this.state = { 
      buttons: [ 
       { 
        name: 'a', 
        text: 'Awesome button' 
       }, 
       { 
        name: 'b', 
        text: 'Beautiful button' 
       }, 
       { 
        name: 'c', 
        text: 'Cool button' 
       } 
      ] 
     } 
    } 
    // This is what you want to do with the information passed 
    handleButtonClick = (name) => { 
     // this could be updating this components' state, which 
     // would rerender the display component because we pass it 
     // our buttons from our state object 
     console.log(name) 
    }; 

    render(){ 
     return <div> 
      <h2>Below are some buttons!</h2> 
      // If you don't use the syntax above, you will run into 
      // errors trying to get a reference to this container through 
      // `this`. You can do this.handleButtonClick.bind(this) 
      // to get around that 
      <ComponentWIthButtons handleButtonClick={this.handleButtonClick} buttons={this.state.buttons} /> 
     </div> 
    } 
}