Reactjs 如果我点击一个组件，如何改变sibling的状态？

我有三个组件来呈现可用时间段的列表

如果我点击component1列表中的一个时隙，它会被选中，现在，如果一个sibling组件，我们称之为component2，也有一个与点击component1的时隙相匹配的时隙，我希望component2中的那个时隙变灰

我该怎么做

呈现可用时隙列表的组件称为CompanyPanel：

export default class CompanyPanel extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      selectedTime: 'None',
      times: this.props.times,
    }

    this.chooseTime = this.chooseTime.bind(this)
    this.deleteTime = this.deleteTime.bind(this)

  }

  componentDidMount () {
    this.chooseTime(this.state.selectedTime)
  }

  deleteTime (time) {
    this.setState( ({times}) => ({
      times: [...this.state.times].filter( t => t !== time),
    }))    
  }

  chooseTime (selectedTime) {
    this.setState({
      selectedTime,
    })
  }

  render() {
    const { selectedTime, times } = this.state

    return (
      <React.Fragment>
        <div className="flex-auto pa3">
          <div className="ba mv2">
            <p className="tc pa2 dib bg-near-white">{this.props.name}</p>
          </div>
          <div className="ba mv2">
            <p className="tc pa2 dib bg-red white">{selectedTime}</p>
          </div>
          <div className="ba mv2">
            {times.map((time, i) => (
              <div key={i} className="bg-green">
                <span className="pa2 red pointer ma2 bg-white" onClick={() => this.deleteTime(time)}>X</span>
                <p onClick={() => this.chooseTime(time.dateUTCString)} className="tc pa2 dib bg-yellow">{time.dateUTCString}</p>
              </div>
            ))}
          </div>
        </div>
      </React.Fragment>
    )
  }
}

导出默认类CompanyPanel扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
selectedTime:“无”，
泰晤士报：这个。道具。泰晤士报，
}
this.chooseTime=this.chooseTime.bind（this）
this.deleteTime=this.deleteTime.bind（this）
}
组件安装（）{
this.chooseTime（this.state.selectedTime）
}
删除时间（time）{
this.setState（（{times}）=>({
时间：[…this.state.times].filter（t=>t！==time），
}))    
}
选择时间（选择时间）{
这是我的国家({
选择时间，
})
}
render（）{
const{selectedTime，times}=this.state
返回(
{this.props.name}
{selectedTime}
{times.map（（时间，i）=>(
this.deleteTime（time）}>X
this.chooseTime（time.dateUTCString）}className=“tc pa2 dib bg yellow”>{time.dateUTCString}
))}
)
}
}

这些CompanyPanel组件由名为CompanysDashboard的父组件包装：

export default class CompaniesDashboard extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      error: null,
      data,
    }

    this.isLoading = this.isLoading.bind(this)
  }

  isLoading() {
    return this.state.posts === null && this.state.error === null
  }

  render() {
    const { data, error } = this.state

    return (
      <React.Fragment>
        {this.isLoading() && <p>LOADING</p>}
        {error && <p>{error}</p>}

        <div className="flex">
          {data && data.map((company, i) => (
            <CompanyPanel key={i} times={company.times} name={company.name} />
          ))}
        </div>
      </React.Fragment>
    )
  }
}

导出默认类CompaniesDashboard扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
错误：null，
数据，
}
this.isLoading=this.isLoading.bind（this）
}
孤岛加载（）{
返回this.state.posts==null&&this.state.error==null
}
render（）{
const{data，error}=this.state
返回(
{this.isLoading（）&&&p>正在加载
}
{error&{error}
}
{data&&data.map（（公司，i）=>(
))}
)
}
}

---

如果CompanyPanel组件中单击了

chooseTime

方法，我想我需要以某种方式在父级中设置一个状态。但不知道怎么做。

你的直觉是正确的。父组件应该有一个状态属性，跟踪所选内容并将该信息传递给子组件。然后，孩子们可以根据需要使用这些信息来灰显。thx，你有关于它的外观的例子吗？好的，你已经在父元素中有了状态，所以你可以添加一个键

selectedCompanyTime

，然后添加一个

updateSelectedCompanyTime

方法来更改状态。然后把它们都传给孩子们。你的直觉是正确的。父组件应该有一个状态属性，跟踪所选内容并将该信息传递给子组件。然后，孩子们可以根据需要使用这些信息来灰显。thx，你有关于它的外观的例子吗？好的，你已经在父元素中有了状态，所以你可以添加一个键

selectedCompanyTime

，然后添加一个

updateSelectedCompanyTime

方法来更改状态。然后把它们都传给孩子们。