reactjs - 在reactjs中将多个状态值传递给子组件

Question

我正在尝试发送两个状态元素作为 props，并且需要将 list 和 menu 作为一个变量发送。

我的getInitialState函数就像；

getInitialState:function(){
    return{
      list:['Breakfast: 9.00', 'Lunch: 12.00', 'Dinner: 18.00'],
      menu:['Kahvaltılık Sebzeli Sucuk, Soslu Zeytin, PeynirBal', 'Tel şehriyeli Çorba, Patates Kızartması, Uzun Makarna, Renkli Salata (tarifimdeki)', 'Patatesli Sigara Böreği, Mercimek köftesi, Elmalı Kurabiye']
    }
  }

而 var 是；

var list = this.state.list;
list = list.map(function(item, index){
  return(
    <ListItem item={item} key={index} onClick={this.handleVisibility}/>
  );
}.bind(this));

我尝试这样做；

var list = this.state.list;
list = list.map(function(item, index){
  return(
    <ListItem item={item} menu={this.state.menu} key={index} onClick={this.handleVisibility}/>
  );
}.bind(this));

我也尝试过这个但不起作用；

var menu = this.state.menu;
var list = this.state.list;
list = list.map(function(item, index, menu){
  return(
    <ListItem item={item} menu={menu} key={index} onClick={this.handleVisibility}/>
  );
}.bind(this));

但它返回未定义

Answer 1

这样写:

<ListItem list = {this.state.list} menu={this.state.menu} onClick={this.handleVisibility}/>

现在在 ListItem 中，您可以通过 this.props.list 和 this.props.menu 访问它们。

更新:

var list = this.state.list;
list = list.map((item, index) => {
    return(
        <ListItem item={item} menu={this.state.menu} key={index} onClick={this.handleVisibility.bind(this)}/>
    );
});