将prop从map方法传递到父组件

Question

我创建了两个组件：0 347 1 332 2 324 3 310 4 347 ... 163 * 164 * 165 * 166 310 167 319 Name: MeanScore, Length: 168, dtype: object 和Counter。在Counters中，我有四个标题。我想通过map方法显示它们。我创建了一个地图方法和地图标题，并传递到另一个组件，例如Counters。它映射到标题，但将所有标题显示为一个：第一，第二和第三。我想在另一行显示每行包含一个标题，而不是一次显示所有标题 这是我的this.props.children代码。我在这里作为道具传递：

Counter

这是我的class Counter extends Component { state={ value:this.props.value, heading:this.props.children }; render() { console.log(this.props) return ( <div> {this.state.heading} <span className={this.getbadgesClasses()}>{this.formatcount()}</span> <button onClick={this.getProductId} className="btn btn-secondary btn-sm">increment</button> </div> ); } handleIncrement=(product)=>{ console.log(product) return this.setState({value: this.state.value + 1}) } getProductId=()=>{ this.handleIncrement({id:1}); } getbadgesClasses(){ let classes =" badge m-2 badge-"; classes += this.state.value === 0 ? "warning" : "primary"; return classes; } formatcount(){ return this.state.value === 0 ? 'Zero' : this.state.value; } } 组件。在这里，我映射了Counters

headings

Answer 1

我是否正确理解，是希望第一行的标题为“第一”，第二行的标题为“第二”等？

在这种情况下，请使用地图功能中的索引来显示正确的标题。

{
  this.state.counters.map((m, index) =>
    <Counter key={m.id} value={m.value}>
      {this.state.headings[index].head}
    </Counter>
  ) 
}

或者，将标题放在每个计数器对象内。

counters:[
    {id:1, value:4, head: 'first'},
    {id:2, value:3, head: 'second'},
    {id:3, value:2, head: 'third'},
    {id:4, value:1, head: 'fourth'}
],

并像这样使用它。

{
  this.state.counters.map((m) =>
    <Counter key={m.id} value={m.value}>
      {m.head}
    </Counter>
  ) 
}