Question

所以我从父组件中获取道具。让我们说该属性具有如下数据结构：[{a：＆＃34; a＆＃34;，b：＆＃34; b＆＃34;}，{c：＆＃34; c＆＃ 34;，d：＆＃34; d＆＃34;} ...]

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

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的子组件中格式化和映射此数组的位置？

1 个答案: