如何在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 ，当您检查物品时state会改变。

您的render方法将使用状态将项目放置在一个div或另一个div中。 因此，您要做的就是使用setState更改状态，render方法将重新绘制新的状态。

Answer 2

您正在使用redux来管理状态。 那很好。 它有助于正确管理/处理数据。

在这种情况下，您要尝试装饰视图而不更改数据（在redux存储中）-不好，在响应时甚至没有意义。

呈现组件/视图仅由A M Odel等（状态）的[衍生】V IEW -在MVC。 在DOM中将某个元素从一个div移到另一个div（如果实现了这一点）不会更改[base]状态-重新渲染后，您将失去这些更改。

---

更新：

您应保持学生在商店中的存在（默认为false）。 您需要一个单独的操作 （具有params / payload： classId ， studentId ），调用API（在操作创建者中保存出席studentId ） 和reducer来在redux存储中更改“标志”。

每个student将拥有isPresent属性。 您可以简单地将renderStudents更改为同时渲染两个div（附加的布尔参数和开头的适当过滤）。