Javascript 如何从React JS中的另一个组件更改事件的同级组件

我是个新手，经常动手练习。我正在处理一个页面，其中有两个表，并且有链接的数据。我正在寻找一些关于如何将依赖数据状态传递给同级组件中的多个元素的建议

import { useState } from "React"
import ...


function Main() {
 [teacherIsPresent, setTeacherIsPresent] = useState(false)

const toggleTeacherPresence = () => {
setTeacherIsPresent((previousState) => !previousState)
}

  return (
    <div className="w3-row-padding">
     <div className="w3-half"> <Professor toggleTeacherPresence={toggleTeacherPresence} teacherIsPresent={teacherIsPresent}/> </div>
     <div className="w3-half"> <Student /> </div>
   </div>
  );

}

表1是教授表，其中列出了每个教授、学科及其可用性

表2是学生表，每个学生都列出了分配的科目和教授

我已经为每个组件创建了表，并将它们放在主组件下

import React from 'react'
import Professor from '../Professor';
import Student from '../Student'

function Main() {
  return (
    <div className="w3-row-padding">
     <div className="w3-half"> <Professor /> </div>
     <div className="w3-half"> <Student /> </div>
   </div>
  );

}

从“React”导入React
从“../Professor”导入教授；
从“../Student”导入学生
函数Main（）{
返回(
);
}

下面是Professor组件的示例代码：

import teachers from "./teachers.json";
  class Professor extends Component{
  constructor(props) {
    super(props);
    this.state = {
    };
  }

 renderHeader = () => {
   let headerElement = ['name', 'present']

   return headerElement.map((key, index) => {
      return <th key={index}>{key}</th>
   })
 }

 renderBody = () => {
  return teachers && teachers.map(({ StaffID, StaffName, RoleID, Present }) => {
      return (
          <tr key={StaffID}>
              <td>{StaffName}</td>
              <td style={{verticalAlign: "middle"}}>
                <input type="checkbox" name={StaffName} defaultChecked={Present ? 'checked' : false} 
     />
              </td>
          </tr>
      )
  })
 }

 render() {
   return (
     <div>
       <table>
        <thead>
            <tr>{this.renderHeader()}</tr>
        </thead>
        <tbody>
            {this.renderBody()}
        </tbody>
    </table>
  </div>
  )
}

}

export default Professor;

        class Professor extends Component{
    
    // your code 
    <input type="checkbox" name={StaffName} defaultChecked={this.teacherIsPresent ? 'checked' : false} onChange{this.props.toggleTeacherPresence}
         />
// your other code
    }

从“/teachers.json”导入教师；
类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
};
}
renderHeader=（）=>{
让headerElement=['name'，'present']
返回headerElement.map（（键，索引）=>{
返回{key}
})
}
renderBody=（）=>{
return teachers&&teachers.map（{StaffID，StaffName，RoleID，Present}）=>{
返回(
{StaffName}
)
})
}
render（）{
返回(
{this.renderHeader（）}
{this.renderBody（）}
)
}
}
导出默认值；

类似地，我还有一个学生表，列出了学生json中包含学生姓名和教授id的数据

在professor表中，用户可以使用复选框标记professor的存在。单击Professors表中的复选框，我想用备用职员或消息更新Student表中的所有行。 在这种情况下，我需要建立同级组件通信，并更新事件同级表中的多行。任何关于如何实现这一目标的想法都会有所帮助

---

谢谢

您需要将状态提升到父组件

import { useState } from "React"
import ...


function Main() {
 [teacherIsPresent, setTeacherIsPresent] = useState(false)

const toggleTeacherPresence = () => {
setTeacherIsPresent((previousState) => !previousState)
}

  return (
    <div className="w3-row-padding">
     <div className="w3-half"> <Professor toggleTeacherPresence={toggleTeacherPresence} teacherIsPresent={teacherIsPresent}/> </div>
     <div className="w3-half"> <Student /> </div>
   </div>
  );

}

从“React”导入{useState}
导入。。。
函数Main（）{
[teacherIsPresent，SetTacherPresent]=useState（false）
const toggleTeacherPresence=（）=>{
SetTacherisPresent（（previousState）=>！previousState）
}
返回(
);
}

在子组件中：

import teachers from "./teachers.json";
  class Professor extends Component{
  constructor(props) {
    super(props);
    this.state = {
    };
  }

 renderHeader = () => {
   let headerElement = ['name', 'present']

   return headerElement.map((key, index) => {
      return <th key={index}>{key}</th>
   })
 }

 renderBody = () => {
  return teachers && teachers.map(({ StaffID, StaffName, RoleID, Present }) => {
      return (
          <tr key={StaffID}>
              <td>{StaffName}</td>
              <td style={{verticalAlign: "middle"}}>
                <input type="checkbox" name={StaffName} defaultChecked={Present ? 'checked' : false} 
     />
              </td>
          </tr>
      )
  })
 }

 render() {
   return (
     <div>
       <table>
        <thead>
            <tr>{this.renderHeader()}</tr>
        </thead>
        <tbody>
            {this.renderBody()}
        </tbody>
    </table>
  </div>
  )
}

}

export default Professor;

        class Professor extends Component{
    
    // your code 
    <input type="checkbox" name={StaffName} defaultChecked={this.teacherIsPresent ? 'checked' : false} onChange{this.props.toggleTeacherPresence}
         />
// your other code
    }

class组件{
//你的代码
//你的其他代码
}

---

<> P>你应该考虑使用功能组件作为孩子——因为你无论如何都要在父母身上做。这会让事情变得更容易…

嗨，谢谢。所以在这种情况下，我是否需要在父组件中包含initial teachers.json数组并将其传递给子组件？而且，当其中一位教师的“出席”发生变化时，我确实需要更新完整的教师json，并通过学生组件重新呈现学生列表？