在Switch函数

Question

我正在尝试创建一个基于选择呈现组件的页面。这是观察变化的主页。

const data = [{ number: 0, text: 'Content Type' },  { number: 1, text: 'Content Publishing Status' },  { number: 2, text: 'Geo Locations' },  { number: 3, text: 'Tags' },  { number: 4, text: 'Change Reason' },
  { number: 5, text: 'Delievery Status' },  { number: 6, text: 'Content Record' }];


export default class ReqEngineAdmin extends Component {
  constructor(props) {
    super(props);
    this.state = {
      adminSelect: 0,
    };
  }
  shouldComponentUpdate(nextProps, nextState) {
    log.debug('updateding to :', nextState.adminSelect);
    return this.state.adminSelect !== nextState.adminSelect;
  }

  handleChange = (e, i, v) => {
    log.debug('in handle Change', v);
    this.setState(() => ({ adminSelect: v }));
  };

  render() {
    const selected = this.state.adminSelect;

    return (
      <div className={styles.bodyContent}>
        <MainHeader title="Requirements Engine Admin" />
        <DropDownMenu value={this.state.adminSelect} onChange={this.handleChange}>
          {data.map((d, i) =>
            <MenuItem key={`AdminSelect_${i + 1}`} value={d.number} primaryText={d.text} />
          )}
        </DropDownMenu>
        <Divder />
        <RenderPanel panelNo={selected} {...this.props} />
      </div>
    );
  }
}

目前处理交换机的页面如下所示：

const renderPanel = (props) => {
  switch (props.panelNo) {
    case 0:
      return (
        <div>
          <ContentTypePanel {...props} />
          <Divider />
          <ContentTypeTable {...props} />
        </div>
      );
    case 1:
      return (
        <div>
          <PubStatusPanel {...props} />
          <Divider />
          <PubStatusTable {...props} />
        </div>
      );
    case 2:
      return (
        <div>
          <GeoLocationPanel {...props} />
          <Divider />
          <GeoLocationTable {...props} />
        </div>
      );
    case 3:
      return (
        <div>
          <TagsPanel {...props} />
          <Divider />
          <TagsTable {...props} />
        </div>
      );
    case 4:
      return (
        <div>
          <ChangeReasonPanel {...props} />
          <Divider />
          <ChangeReasonTable {...props} />
        </div>
      );
    case 5:
      return (
        <div>
          <DelieveryStatusPanel {...props} />
          <Divider />
          <DelieveryStatusTable {...props} />
        </div>
      );
    case 6:
      return (
        <div>
          <ContentRecordPanel {...props} />
          <Divider />
          <ContentRecordTable {...props} />
        </div>
      );
    default:
      return null;
  }
};

renderPanel.propTypes = {
  panelNo: PropTypes.number,
};
export default renderPanel;

我正试图超越已更改的状态，但我迷失了一个解决方案，让页面呈现新的组件。

Answer 1

什么是DropDownMenu？ 您正在将onChange方法绑定到它。什么时候应该被触发？ 绑定的handleChange方法预计会有2个您不会通过的参数。

我认为应该在MenuItem级别定义handleChange回调

<MenuItem 
    key={`AdminSelect_${i + 1}`} 
    value={d.number} 
    primaryText={d.text}
    onClick={this.handleChange.bind(this, i)}
/>

Answer 2

使用componentWillUpdate方法修复：

componentWillupdate(nextProps,nextState){
 this.selectedPanel(nextState.selected, nextProps)
}

selectPanel(panelNo,props) =>{
 switch(panelNo){
  case 1: 
   return (
      <div>
        <PubStatusPanel {...props} /> <Divider /> <PubStatusTable />
      </div>
    );}
...
 case 0:
  default:
    return (
      <div>
        <ContentTypePanel {...props} /> <Divider /> <ContentTypeTable />
      </div>
    );
}

};