反応内の状態内のコンポーネントをどのようにレンダリングするのですか？

Question

私は反応があり、私はthis.stateの中で誕生日をレンダリングする方法に固執しています。

{this.state.birthdays} 

しかし、それは各誕生日には達していないようです。私のgetElementByIDは、私のHTML上に存在するコンテナと等しいです。どんな助言/助けも素晴らしいだろう！

renderBirthdays: function(key) { 
    return (
     <div key={key} index={key} details={this.state.birthdays[key]}> 
       {details.name} - {details.date} 
     </div> 
    ) 
}, 
render: function() { 
    return (
     <div>{ Object.keys(this.state.birthdays).map(this.renderBirthdays) }</div> 
    ) 
} 

だから、あなたのオブジェクトがかかりますjavascripts mapを利用することができます。このようrenderBirthdaysと呼ばれる関数を作成し、あなたのレンダリング機能の上に、その後

{ Object.keys(this.state.birthdays).map(this.renderBirthdays) } 

をそして：

class App extends React.Component { 
      constructor(props) { 
      super(props); 

      this.state = { 
       birthdays: { 
       'January': [{ 
        name: 'Mike', 
        date: '1/14/90' 
       }, { 
        name: 'Joe', 
        date: '1/7/92' 
       }], 

       March: [{ 
        name: 'Mary', 
        date: '3/7/88' 
       }] 
       } 
      } 
      } 

      render() { 
      return ( 
       <div> 

       </div> 
      ); 
      } 
     } 
ReactDOM.render(<App />, 
document.getElementById('container')); 

Answer 1

これはテストされていませんが、このようなものが動作するはずです。あなたの状態オブジェクトを移入しているが、あなたは、レンダリング機能でそれを何もしていないので、何のデータいない

render() { 
    return ( 
     <div> 
     {Object.keys(this.state.birthdays).reduce((birthdays, month) => { 
      return birthdays.concat(this.state.birthdays[month].map((bday) => { 
       return (
        <p>{bday.name} - {bday.date}</p> 
       ); 
      })); 
     }, [])} 
     </div> 
    ); 
} 

Answer 2

これを試してみてくださいそれらをキー入力します。次に、このキーをrenderBirthdaysという関数に渡して、アイテムを繰り返し処理します。要素にキーとインデックスを渡す必要があります。使いやすさのために、反復処理中の現在選択されている項目と同じ大きさの小出しを渡すことができます。そうすれば、要素内に{details.name}などを使用できます。