Reactjs 在开关功能上反应渲染组件

我正试图创建一个页面，根据选择呈现组件。这是一个主页，它将关注这一变化

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 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'}，
{编号：5，文本：'删除状态'}，{编号：6，文本：'内容记录'}]；
导出默认类ReqEngineAdmin扩展组件{
建造师（道具）{
超级（道具）；
此.state={
adminSelect:0，
};
}
shouldComponentUpdate（下一步，下一步状态）{
log.debug（'更新为：'，nextState.adminSelect）；
返回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；
返回(
{data.map（（d，i）=>
)}
);
}
}

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

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;

const renderPanel=（道具）=>{
开关（道具面板编号）{
案例0：
返回(
);
案例1：
返回(
);
案例2：
返回(
);
案例3：
返回(
);
案例4：
返回(
);
案例5：
返回(
);
案例6：
返回(
);
违约：
返回null；
}
};
renderPanel.propTypes={
面板编号：PropTypes.number，
};
导出默认渲染面板；

---

我正在尝试刚过更改的状态，但我在一个解决方案上迷失了方向，无法让页面呈现新组件

什么是

下拉菜单

？ 您正在将onChange方法绑定到它。什么时候触发？ 绑定的

handleChange

方法需要两个您不传递的参数

我认为handleChange回调应该在

MenuItem

级别定义

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

---

使用

组件更新方法修复：

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

组件将更新（下一步，下一步状态）{
此.selectedPanel（nextState.selected，nextrops）
}
选择面板（面板编号，道具）=>{
开关（面板编号）{
案例1：
返回(
);}
...
案例0：
违约：
返回(
);
}

})
 renderPanel是否不呈现任何内容或呈现空值？您从handleChange获得什么console.log输出，并且应该更新组件？您可以将组件放入数组中，而不是
开关，例如
const panels=[ContentTypePanel，PubStatusPanel…]
。然后
const SelectedPanel=panels[props.panelNo]
和
@D-reaper它呈现第一组组件，但一旦更改，它在对账时失败。@DavorinRuševljan我根据选择的值0,1,2获取。。。但是，它在呈现下一个组件时失败。更改方法正在工作，导致错误的是对帐。同样不幸的是，我们仅限于使用“确定”。我不知道您使用的是材质ui组件。对此表示抱歉。