Question

由于我在studentItem中使用了片段div，因此无法找到此错误。该错误的可能解决方法是什么？

 render() {
    return (
      <div className="container-fluid">
        <div className="row mt-3"><div className="col-lg-12">
          <div className="card">
            <div className="card-header">
              Student Registry
</div>
            <div className="card-body">
              <table className="table table-hover">
                <thead className="thead-dark"><tr><th>Name</th><th>Grade</th><th>School</th><th>Edit/Save</th><th>Delete</th></tr></thead>
                <StudentList deleteStudent={this.deleteStudent}
                 studentList={this.state.studentList}
                 editStudentSubmit={this.editStudentSubmit} />
              </table>
              <button className="btn btn-dark pull-left" onClick={this.addNewStudent}>Add New</button>
            </div></div></div></div></div>
    );
  }

上面的代码是主要的父组件

 class StudentList extends Component {

      componentWillMount() {
        console.log('----')
        console.log(this.props.studentList)
      }


      render() {
        let students = this.props.studentList;
        const trItem = students.map((item, index) =>
         <StudentItem key={index} student={item} index={index} editStudentSubmit={this.props.editStudentSubmit} deleteStudent={this.props.deleteStudent} />)
        return (
          <div>{trItem}</div>
        );
      }
    }

render() {
    const { name, grade, school } = this.props.student;
    return (
      this.state.isEdit === true ?
        <tr className="bg-warning" key={this.props.index}>
          <td><input ref={nameInput => this.nameInput = nameInput} defaultValue={name} /></td><td><input defaultValue={grade} ref={gradeInput => this.gradeInput = gradeInput} /></td><td><input ref={schoolInput => this.schoolInput = schoolInput} defaultValue={school} /></td><td><i className="far fa-save" onClick={this.editStudentSubmit}></i></td>
          <td><i className="fas fa-trash"></i></td>
        </tr>
        :
        <tr key={this.props.index}>
          <td>{name}</td><td>{grade}</td><td>{school}</td>
          <td><i className="far fa-edit" onClick={this.editStudent}></i></td><td><i className="fas fa-trash" onClick={this.deleteStudent}></i></td>
        </tr>
    );
  }

如上面的代码所示，

studentItem已导入到studentList中。

validateDOMNesting（...）：<div>不能作为<tbody>的子代出现

0 个答案: