reactjs - 在 ES6 的子组件中在哪里格式化和映射这个数组？

Question

所以我从父组件那里得到一个道具。假设该属性具有如下数据结构： [{a: "a", b:"b"}, {c:"c", d:"d"}...]

这是获得这个道具的组件。

class Child extends Component {
    constructore(props){
       super();
       this.state = {items: []} 
       // props.name {a: "a", b: "b"}
    }
    render(){
       return( 

    )
  }
}

现在，在我在子组件中渲染它之前，我想将它映射到其他类似的东西

for (let key in names){
    items.push(<MenuItem value={names[key]}
    key={key} primaryText={names[key]} />);
}

最终的结果是。

 class Child extends Component {
   constructore(props){
     super();
      this.state = {items: [<MenuItem value={"a"}>, 
     <MenuItem value{"b"},....etc   
}
  render(){
     return( 

   )
  }
 }

Answer 1

您可以执行以下操作，我将您的数组修改为

[{key: "a", value:"b"}, {key:"c", value:"d"}...]

我希望这个必要条件可以改变并且仍然适用于你的挑战

class Child extends Component {
   constructor(props){
     super(props);
   }
   render(){
     return this.props.items.map((item)=> {
       return <MenuItem key={item.key} value={item.value}/>;
     })
   }
}

这通常是一个很好的反应模式。到处使用它:)