Question

我对ReactJS很陌生，我无法理解不同组件之间如何相互通信。

我确实有一个组件可以呈现一个列表，每个列表项都是一个不同的组件。我想保持组件尽可能小。

现在，每个列表项都可以有一个名为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>;
  }
}

所以，我有pro active传递给这个组件，我存储在组件状态。当我单击列表项时，我将当前项的状态设置为活动状态。问题是我希望所有其他列表项变为非活动状态，从而将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，该函数作为道具传递给每个OfficeRibbonTab。在OfficeRibbonTab中，当单击选项卡时，您只需调用回调，并传入选定选项卡的索引或ID：

<强> OfficeRibbonTab.jsx

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

<强> OfficeRibbon.jsx

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

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

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

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

1 个答案: