ReactJS显示/隐藏并行组件-Java 学习之路

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

我有一个带有父组件的基本页面（我称之为 MyContainer ），它有多个并行的面板式组件（ MyPanel ）并排显示 . 我现在要实现的是每个面板组件都有一个展开图标，单击该图标时，将使该面板占据其父容器的整个宽度（即 width:100% ）并隐藏所有其他面板（即： display:none 或 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的新手，所以对我很轻松:)

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 () {
    ...
  }
});

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

回复于 2024-04-25T22:44:31+08:00

ReactJS显示/隐藏并行组件

1 回答

相关问题