单击项目时,在React中更改列表中的项目

Question

我对ReactJS很陌生,我很难理解不同的组件如何相互通信.

我有一个组件将呈现一个列表,每个列表项是一个不同的组件.我想保持组件尽可能小.

现在,每个列表项都可以具有一个名为property的属性active,如果该属性设置为true,则会添加一个附加类.

这是在组件中定义单个项的类.

请参阅以下代码,以了解定义单个列表项的组件:

export default class OfficeRibbonTab extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      active: props.active ? props.active : false
    }

    // Assign all the correct event handlers.
    this.setActive = this.setActive.bind(this);
  }


  setActive() {
    this.setState({active: true});
  }

  render() {
    // When the tab is defined as active, add the "active" class on it.
    if (this.state.active)
    { var tabClassName = "active"; }

    return <li onClick={this.setActive} className={tabClassName}>{this.props.tabName}</li>;
  }
}

所以,我有active传递给这个组件的propery ,我存储在组件状态中.当我单击列表项时,我将当前项的状态设置为活动状态.问题是我希望所有其他列表项变为非活动状态,从而将active的状态设置为false.

下面的代码是我的列表的概述:

export default class OfficeRibbon extends React.Component {

  constructor(props) {
    // Call the 'base' constructor.
    super(props);
  }

  render() {
    var tabs = [];

    // Loop over all the tab elements and define how the element should be rendered.
    for (var i = 0; i < this.props.dataSource.tabs.length; i ++)
    {
      if (i == 1)
      { tabs.push(<OfficeRibbonTab active={true} key={this.props.dataSource.tabs[i].name} tabName={this.props.dataSource.tabs[i].name}></OfficeRibbonTab>); }
      else
      { tabs.push(<OfficeRibbonTab key={this.props.dataSource.tabs[i].name} tabName={this.props.dataSource.tabs[i].name}></OfficeRibbonTab>); }
    }

    return (<div>
      <div className="wrap-top">
        <OfficeRibbonTitle title={this.props.title}/>

        <ul className="tabs">
          {tabs}
        </ul>

      </div>

    </div>);
  }
}

它看起来不像火箭科学,但我想用React的方式做它而不重新发明轮子.

谁可以指导我朝正确的方向？

亲切的问候

Answer 1

它看起来像OfficeRibbonTab管理自己的状态，这很好，但它从不通知其父组件状态更改。最常见的方法是为每个子组件提供回调函数，以便它可以与父组件通信：

例如，OfficeRibbon现在将包含一个函数handleTabSelect，该函数作为 prop 传递给每个OfficeRibbonTab. 在 中OfficeRibbonTab，当单击选项卡时，您只需调用回调，并传入所选选项卡的索引或 id：

OfficeRibbonTab.jsx

 setActive(tabIndex) {
    this.props.handleTabSelect(tabIndex);
 }

OfficeRibbon.jsx

 handleTabSelect(tabIndex) {
    this.setState({activeIndex: tabIndex});
 }

现在OfficeRibbon，您可以更新状态以设置activeIndex或activeId，再次通过您选择的索引或标识符。通过在 中设置状态OfficeRibbon，我们必然强制render()其子级中的 a 。因此，activeIndex当我们迭代时，我们只需将迭代器的索引与您的状态的索引进行匹配render()：

<OfficeRibbonTab active={index === this.state.activeIndex} onClick={this.handleTabSelect} ... />