Question

我需要在我的项目中完成一项任务。那就是，我在主页中有一个默认组件，默认情况下，它将在每次页面加载时呈现。在该组件中，我在顶部有四个按钮或div，在底部有一个注册按钮。现在，当用户单击顶部的按钮或div时，当用户单击按钮中的“注册”按钮时，它应选择分配给该按钮的组件，并且应将默认组件替换为所选择的组件。下面是我的代码。它没有正确完成。请让我知道可以实现所需输出的方式。

谢谢。

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;

Answer 1

您不能在return内进行开关保护。您将不得不在其外部进行操作。你可以试试吗？

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

Answer 2

渲染返回语句中不能包含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>
  );  
}

但是，以上并不是执行此操作的最佳方法，我建议您通过react-router并将其用于呈现条件组件。如果您不想使用分配给每个MemoryRouter的路径来更新URL，则可以使用react-router中的Route。

Answer 3

我认为您将需要两个状态变量。一个将保留要渲染的组件的最终值，而另一个将用于在单击按钮时跟踪事件。

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;

Answer 4

正如其他人所提到的那样，您无法像这样使用JSX中的switch语句。

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

我创建了一个具有所需功能的代码沙箱，以帮助您入门：https://codesandbox.io/s/zr766pkwpp

用新的onClick替换默认组件

4 个答案: