Question

前言：我对ReactJS很新，所以我的问题将反映出我对事情的运作方式缺乏了解。现在我正在使用React + Alt。

我有一个基本页面，其中包含一个父组件（我称之为MyPanel），它有多个并行的面板式组件（width:100%）并排显示。我现在要实现的是每个面板组件都有一个Expand图标，单击该图标时，将使该面板占据其父容器的整个宽度（即display:none）并隐藏所有其他面板（即： visibility:hidden或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> ); } }）。再次单击该按钮时，将再次显示所有面板的初始状态。

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

{{1}}

我不知道怎么做的部分是让这个组件告诉它的兄弟组件是否应该隐藏或展示自己。试图在这里找到类似的问题，我认为有两种方法：在父组件中使用道具来跟踪隐藏或显示哪些面板，或者使用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 () {
    ...
  }
});

您在这里所做的是将父亲的事件处理程序传递给子项。由于函数是在父级中定义的，因此它可以访问父级的状态/道具等。

ReactJS显示/隐藏并行组件

1 个答案: