Javascript 用新组件替换默认组件onClick

我需要在我的项目中完成一项任务。在这种情况下，我在主页中有一个默认组件，默认情况下，它将在每次加载页面时呈现。在该组件中，我在顶部有四个按钮或div，在底部有一个Register按钮。现在，当用户单击顶部的按钮或div时，它应该拾取分配给该按钮的组件，并且当用户单击按钮中的Register按钮时，它应该用拾取的组件替换默认组件。下面是我的代码。它没有正确完成。请告诉我怎样才能达到预期的产量

提前谢谢

class GetStart extends Component {

        constructor(props){
        super(props);
        this.state = {
            value: null,
        };
        };

      handleEvent = (button) => {
        this.setState({ value: button });
      };
        handleClick = () => {

        } ;

      render() {
          const { classes } = this.props;
          const { value } = this.state;
        return (
            <div>
                    <div className={classes.buttonComponent}>
                        <Button onClick={() => this.handleEvent(0)}>Component One</Button>
                        <Button onClick={() => this.handleEvent(1)}>Component Two</Button>
                        <Button onClick={() => this.handleEvent(2)}>Component three</Button>
                        <Button onClick={() => this.handleEvent(3)}>Component Four</Button>

                        <Button variant="contained" onClick={this.handleClick} className={classes.submitButton}>
                            Register Now
                        </Button>
                    </div>
            switch(value){
               case 0: 
                 return <ComponentOne />;
               case 1:
                 return <ComponentTwo />;
               case 2:
                 return <ComponentThree />;
               case 3:
                 return <ComponentFour />;
               else:
                  return <DefaultComponent />;
                   }
                </div>
        );  
      }
    }



    export default GetStart;

类GetStart扩展组件{
建造师（道具）{
超级（道具）；
此.state={
值：null，
};
};
handleEvent=（按钮）=>{
this.setState（{value:button}）；
};
handleClick=（）=>{
} ;
render（）{
const{classes}=this.props；
const{value}=this.state；
返回(
this.handleEvent（0）}>组件一
this.handleEvent（1）}>组件二
this.handleEvent（2）}>组件三
this.handleEvent（3）}>组件4
现在注册
开关（值）{
案例0：
返回；
案例1：
返回；
案例2：
返回；
案例3：
返回；
其他：
返回；
}
);  
}
}
导出默认GetStart；

您不能在

返回装置内进行开关盒操作。你必须在外面做这件事。你能试试这个吗

render() {
    const { classes } = this.props;
    const { value } = this.state;
    let component;
    switch (value) {
      case 0:
        component = <ComponentOne />;
        break;
      case 1:
        component = <ComponentTwo />;
        break;
      case 2:
        component = <ComponentThree />;
        break;
      case 3:
        component = < ComponentFour />;
        break;
      default:
        component =  <DefaultComponent />;
        break;
    }
    return (
      <div>
        <div className={classes.buttonComponent}>
          <Button onClick={() => this.handleEvent(0)}>Component One</Button>
          <Button onClick={() => this.handleEvent(1)}>Component Two</Button>
          <Button onClick={() => this.handleEvent(2)}>Component three</Button>
          <Button onClick={() => this.handleEvent(3)}>Component Four</Button>

          <Button variant="contained" onClick={this.handleClick} className={classes.submitButton}>
            Register Now
          </Button>
        </div>
        {
          component
        }
      </div>
    )
  }

render（）{
const{classes}=this.props；
const{value}=this.state；
let组件；
开关（值）{
案例0：
分量=；
打破
案例1：
分量=；
打破
案例2：
分量=；
打破
案例3：
组件=；
打破
违约：
分量=；
打破
}
返回(
this.handleEvent（0）}>组件一
this.handleEvent（1）}>组件二
this.handleEvent（2）}>组件三
this.handleEvent（3）}>组件4
现在注册
{
成分
}
)
}
在render return语句中不能有Switch语句。您可以将其放在渲染中，并将正确的组件指定给变量，然后按如下所示进行渲染

render() {
  const { classes } = this.props;
  const { value } = this.state;
  let Comp;
  switch(value){
         case 0: 
           Comp =  ComponentOne;
         case 1:
           Comp =  ComponentTwo;
         case 2:
           Comp =  ComponentThree;
         case 3:
           Comp =  ComponentFour;
         else:
            Comp = DefaultComponent;
  }
  return (
      <div>
              <div className={classes.buttonComponent}>
                  <Button onClick={() => this.handleEvent(0)}>Component One</Button>
                  <Button onClick={() => this.handleEvent(1)}>Component Two</Button>
                  <Button onClick={() => this.handleEvent(2)}>Component three</Button>
                  <Button onClick={() => this.handleEvent(3)}>Component Four</Button>

                  <Button variant="contained" onClick={this.handleClick} className={classes.submitButton}>
                      Register Now
                  </Button>
              </div>
              <Comp />
          </div>
  );  
}

render（）{
const{classes}=this.props；
const{value}=this.state；
让Comp；
开关（值）{
案例0：
Comp=组件一；
案例1：
Comp=组件2；
案例2：
Comp=组件三；
案例3：
Comp=组件四；
其他：
Comp=默认组件；
}
返回(
this.handleEvent（0）}>组件一
this.handleEvent（1）}>组件二
this.handleEvent（2）}>组件三
this.handleEvent（3）}>组件4
现在注册
);  
}

但是，上述方法并不是实现此目的的最佳方法，我建议您通过
react router
并将其用于渲染条件组件。如果您不想用分配给每个
路由的路径更新URL，您可以从
react router
使用
MemoryRouter
，，正如其他人所提到的，您无法在JSX中使用类似的switch语句

如果将逻辑的各个部分划分为不同的函数，代码将更容易理解

我创建了一个代码沙盒，它具有帮助您入门所需的功能：
我认为您需要两个状态变量。一个将保存要渲染的组件的最终值，另一个将用于在单击按钮时跟踪事件

class GetStart extends Component {

constructor(props) {
    super(props);
    this.state = {
        value: null,
        componentToRender: null //tells switch which component to render
    };
    this.renderComponent = this.renderComponent.bind(this)
};

handleEvent = (button) => {
    this.setState({value: button});
};
handleClick = () => {
    this.setState({componentToRender: this.state.value})//take the
    // currently selected component and make it the component to render
};
    //extract the switch statement to a method of its own
renderComponent() {
    switch (this.state.componentToRender) {
        case 0:
            return <ComponentOne/>;
        case 1:
            return <ComponentTwo/>;
        case 2:
            return <ComponentThree/>;
        case 3:
            return <ComponentFour/>;
        default://replaced 'else' with 'default'
            return <DefaultComponent/>;
    }
}

render() {
    const {classes} = this.props;
    return (
        <div>
            <div className={classes.buttonComponent}>
                <Button onClick={() => this.handleEvent(0)}>Component
                    One</Button>
                <Button onClick={() => this.handleEvent(1)}>Component
                    Two</Button>
                <Button onClick={() => this.handleEvent(2)}>Component
                    three</Button>
                <Button onClick={() => this.handleEvent(3)}>Component
                    Four</Button>

                <Button variant="contained" onClick={this.handleClick}
                        className={classes.submitButton}>
                    Register Now
                </Button>
            </div>
            {this.renderComponent()}
        </div>
    );
   }
  }


  export default GetStart;

类GetStart扩展组件{
建造师（道具）{
超级（道具）；
此.state={
值：null，
componentToRender:null//告诉开关要渲染哪个组件
};
this.renderComponent=this.renderComponent.bind（this）
};
handleEvent=（按钮）=>{
this.setState（{value:button}）；
};
handleClick=（）=>{
this.setState（{componentToRender:this.state.value}）//获取
//当前选定的组件，并使其成为要渲染的组件
};
//将switch语句提取到它自己的方法
renderComponent（）{
开关（this.state.componentorender）{
案例0：
返回；
案例1：
返回；
案例2：
返回；
案例3：
返回；
default://replaced “else”和“default”
返回；
}
}
render（）{
const{classes}=this.props；
返回(
此.handleEvent（0）}>组件
一个
这个.handleEvent（1）}>组件
两个
这个.handleEvent（2）}>组件
三
这个.handleEvent（3）}>组件
四
现在注册
{this.renderComponent（）}
);
}
}
导出默认GetStart；