在 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}/>;
     })
   }
}

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

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

where to format and map this array in the child component in ES6?

reactjs

es6-class