Question

render() {
   const Array = this.props.students.map((data) => {
      return (
         <button 
           key={data.name}
           //key={data.birthDate}
           //key={data.age}
           //key={data.class}
         >{data.name}</button>
      );
   });

   return (
     <div>
       {Array}
       <StudentInfo name = {"Amira"}/>
     </div> 
   );
}

这是我的代码。目前，我尝试将<button></button>中的数组数据传递到<StudentInfo />并替换name = {"Amira"} 任何人都可以帮我这个吗？

谢谢。

Answer 1

这可能是您的答案：How to pass an array of items in REACT.js

Answer 2

这样做可以解决问题，

render() {
   const nameArray = [];
   const Array = this.props.students.map((data) => {
      nameArray.push(data.name); //fill the array with names
      return (
         <button 
           key={data.name}
           //key={data.birthDate}
           //key={data.age}
           //key={data.class}
         >{data.name}</button>
      );
   });

   return (
     <div>
       {Array}
       <StudentInfo name = {nameArray}/>
     </div> 
   );
}

Answer 3

你想做的是这样的事情

constructor(props){
  super(props);
  this.students = [
    {name: 'john'},
    {name: 'paul'},
    {name: 'clara'}
  ];      
  this.state = {
    selectedStudent: this.students[0]
  }
  this.selectStudent = this.selectStudent.bind(this);
}

selectStudent(student){
  this.setState({selectedStudent: student});
}

render(){
  return (
    <div>
      {this.students.map((student, i) => (
        <button key={i}
          onClick={() => this.selectStudent(student)}
        >{student.name}</button>
      ))}
      <h1>{this.state.selectedStudent.name}</h1>
    </div>
  );
}

在线演示：https://codesandbox.io/s/91wp5j33pw

＆＃34;反应js＆＃34;如何使用道具传递数组数据？

3 个答案: