如何在 React 中将我的子组件移动到新的父组件？

Question

我正在渲染一个包含复选框的子组件列表，当单击该复选框时，我想将该子组件移动到另一个 div 元素中。

这是我的应用看起来不错的图片。我想检查学生姓名并将其向上移动，在“现在”子标题下..

let ClassComp = (props) => {
  const { teacher, subject, students, day } = props.classOf

  const renderStudents = (students) => {
    if (students && students.length > 0) {
      return (
        <div>
          {students.map((student, index) =>
            <StudentCheckbox key={index} student={student} handleCheckboxClick={handleCheckboxClick} />
          )}
        </div>
      )
    } else {
      return <p style={{ margin: '10px' }} >No students registered.</p>
    }
  }

  const handleCheckboxClick = (elId) => {
    const presentStudentEl = document.getElementById('present-students')

    // move StudentCheckbox element inside this element ^
  }

  return (
    <div className="ui segment" style={segmentStyle} >
      <div className="content">
        <div className="ui medium header">{teacher} - {subject}</div>
        <div className="ui divider"></div>
        <div className="ui sub header">Students</div>
        <div className="ui tiny header">Present:
          <div id="present-students"></div>
        </div>
        <div className="ui tiny header">Absent:
          <div id="absent-students">
            {renderStudents(students)}
          </div>
        </div>
        <div style={{ marginBottom: '30px' }}>
          <button className="mini compact ui negative right floated button"
            onClick={() => setModalVisible(true)}>Delete Class
          </button>
          <Link to={`/todaysclass/edit/${props.classId}`} className="mini compact ui right floated button">Edit Class</Link>
        </div>
      </div>
    </div >
  )
}

const mapStateToProps = (state, ownProps) => {
  return { classOf: state.classes[ownProps.classId] }
}
export default connect(mapStateToProps, { deleteClass })(ClassComp)

这是我的子组件：

const StudentCheckbox = (props) => {
  const uniqId = idGenerator()
  return (
    <div className="field" style={{ margin: '5px' }}>
      <div className="ui checkbox">
        <input type="checkbox" id={uniqId} onChange={() => props.handleCheckboxClick(uniqId)} />
        <label htmlFor={uniqId}>{props.student}</label>
      </div>
    </div>
  )
}

Answer 1

在这种情况下，您需要组件的状态。查看文档：

https://reactjs.org/docs/state-and-lifecycle.html

所以基本上，除了props（“固定”）之外，你还会有一个state，当你检查项目时它会改变。

您的render 方法将使用状态将项目放置在一个div 或另一个div 中。所以你所要做的就是使用setState改变状态，渲染方法会重绘新的状态。

Answer 2

您正在使用 redux 来管理状态。那挺好的。它有助于正确管理/操作数据。

在这种情况下，您尝试在不更改数据的情况下装饰视图 [在 redux 存储中] - 这不好，甚至在 react 中都没有意义。

渲染的组件/视图只是一个 [派生的] View 从一个 Model(state) - 在 MVC 中。在 DOM 中将某些元素从一个 div 移动到另一个（如果你实现了这个）不会改变 [base] 状态 - 重新渲染后你会失去这些变化。

---

更新：

您应该保持学生在商店中的存在（默认为 false）。 您需要一个单独的操作（使用参数/有效负载：classId、studentId），调用 API（在操作创建者中以节省出勤率）和 reducer 以更改“标志” ' 在 redux 商店中。

每个student 都会有isPresent 属性。您可以简单地更改您的 renderStudents 以呈现两个 div（附加的布尔参数和开始时的适当过滤）。