javascript - 如何在 React 状态下渲染组件？

Question

我正在学习 React，但我一直在研究如何在 this.state 中渲染生日。我想我会使用类似的东西:

 {this.state.birthdays}

但这似乎并没有达到每个生日。我的 getElementByID 等于 HTML 上存在的容器。任何建议/帮助都会很棒!

    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

试试这个:

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

然后在渲染函数之上创建一个名为 renderBirthdays 的函数，如下所示:

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 的函数，该函数将迭代该项目。我们需要将一个键和一个索引传递到元素中，为了便于使用，我们可以将一个详细信息属性传递给它，等于它正在迭代的当前选定的项目。这样我们就可以在元素中使用 {details.name} 等。