ReactJS 显示/隐藏并行组件

Question

前言：我对 ReactJS 很陌生，所以我的问题将反映出我对事物的工作原理缺乏了解。现在我正在使用 React + Alt。

我有一个带有父组件（我称之为MyContainer）的基本页面，它有多个并排显示的并行面板式组件（MyPanel）。我现在要实现的是每个面板组件都有一个展开图标，单击该图标时，将使该面板占据其父容器的整个宽度（即width:100%）并隐藏所有其他面板（即：@987654324 @ 或 visibility:hidden)。再次单击该按钮时，将再次显示所有面板的初始状态。

所以我的问题是在 ReactJS/Alt 中实现这一点的正确方法。到目前为止，我已经完成了简单的部分，即监听展开按钮的单击并更新面板应该显示为正常还是全宽的状态。

export default class MyPanel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      expanded: false
    };
    this.handleExpand = this.handleExpand.bind(this);
  }

  handleExpand() {
    this.setState({ expanded: !this.state.expanded });
  }

  render() {
    var expandStyle = {};
    if (this.state.expanded) {
        expandStyle.width = 'calc(100% - 40px)';
    }

    return(
      <div style={expandStyle}>
        <ExpandButton onExpandEvent={this.handleExpand} />
        {/* Rest of panel props data rendered here */} 
      </div>
    );
  }
}

我不知道该怎么做的部分是让这个组件告诉它的兄弟组件它们应该隐藏还是显示自己。试图在这里找到类似的问题，我认为有两种方法：使用父组件中的道具来跟踪哪些面板被隐藏或显示，或者使用 Store/Actions 来跟踪这一点，但是我不确定两者的实施。

再说一次，我是 ReactJS 的新手，所以请放轻松 :)

Answer 1

您有自己的方法来稍微扩展/隐藏：由于您的面板都包含在父组件中，因此该组件应决定单个面板是正常的、展开的还是隐藏的。您应该使用父组件的状态来完成此操作，而不是每个面板组件的状态。例如：

var Container = React.createClass({
  getInitialState () {
    return {
      expandedPanel: null,
      panels: someArrayOfPanelData
    };
  },
  changeExpandedPanel (panelIndex) {
    return () => {
      this.setState({
        expandedPanel: panelIndex
      });
    };
  },
  render () {
    let panels = this.state.panels.map((panelData, i) => {
      return (
        <Panel 
          key={i} 
          data={panelData} 
          expanded={(i == this.state.panelExpanded)} 
          handleExpansion={this.changeExpandedPanel(i)}
        />
      );
    });

    return (
      <div>
        {panels}
      </div>
    );
  }
});

var Panel = React.createClass({
  propTypes: {
    ...,
    handleExpansion: React.PropTypes.function.isRequired
  },
  handleExpand () {
    this.props.handleExpansion();
  },
  render () {
    ...
  }
});

您在这里所做的是将父级的事件处理程序传递给子级。由于函数是在parent中定义的，所以它可以访问到parent的state/props等。