同じReactコンポーネントの複数をレンダリングすると、複数の別のコンポーネントをレンダリングできますか？

Question

私はReact.jsで親コンポーネントが全体的なバランスを持ち、特定の数の "Budget"コンポーネント（例：Vacations）を作成できます。そこから任意の数の " （例えば、私はサンフランシスコでxドルを使うだろう）。私の最初の考えは、親が成長と変化を続けることができる州の「予算」コンポーネントの配列を持つことができ、Budgetコンポーネントはその州の「エントリー」コンポーネントの配列を持つことができ、それも成長し続けることができるということでした。しかし、1つのコンポーネントだけが状態を持っている必要があるため、これは悪い習慣であることがわかります。

誰もが以前に作成した予算のエントリ数を変更できるようにするために、親コンポーネントの予算とそのエントリを管理する最も良い方法は何ですか？

ご協力いただきありがとうございます。これが混乱してもごめんなさい！

Answer 1

ええ、私は、「ただ1つのコンポーネントが国家を持っているはずです」という考えを持っていると思います。あなたの質問に対するコメントはReactのコンポーネントツリーのどこにでも置くことができます。これは、UIに関連する状態（たとえば、このボタンが選択されているかどうかなど）によって行われることがよくあります。しかし、アプリケーションの状態、つまりアプリケーションがレンダリングしているデータに関しては、通常はすべてを1か所にまとめておくと便利です。

最初は純粋なデータ構造について考えるだけで、Reactについて心配する必要はありません。

おそらく予算オブジェクトの配列のように見える終わるしようと、それらの予算の各内部のエントリの配列がありますオブジェクトです：

[ 
    { 
    title: 'Vacations', 
    entries: [ 
     { 
     spent: 10, 
     place: 'San Francisco', 
     ... 
     }, 
     ... 
    ], 
    }, 
    ... 
] 

そして、それが反応するようになると、あなたが入れたいですよメインの<App />コンポーネントのその状態。 <App />の責任は、<Budget />コンポーネントのリストをレンダリングすることです。これらの予算コンポーネントのそれぞれは、そのデータとそれに渡されるエントリを小道具として取得します。だから、何か<Budget />内部のような、

class App extends Component { 
    constructor() { 
    this.state = { 
     budgets: [... as above ...] 
    } 
    } 

    render() { 
    const { budgets } = this.state 
    return (
     <div> 
     {this.state.budgets.map(budget => { 
      <Budget key={budget.title} {...budget} /> 
     })} 
     </div> 
    ) 
    } 
} 

各<Budget />が小道具としてentries配列を受け取ることになりますので、あなたが同様に<Entry />コンポーネントの配列をレンダリングすることができます。データを変更するという点で

、限り、あなたは子コンポーネントへ<App />からハンドラを伝承し、それらのハンドラは予算データに変更を加えることが<App />内setState()を呼び出すと、あなたのアプリが、それらの変化に反応し、再描画します上から下まで。