React Render Components on 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

使用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>
    );
}

}；

Answer 2

什么是DropDownMenu？您正在将一个onChange方法绑定到它。它应该在什么时候触发？绑定的handleChange方法需要2个您没有传递的参数。

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

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