有条件地显示3个组件中的1个

Question

I have built a toggle component that shows one out of two components based on whether the Purchase is true or not. Now I want to select from 3 components and I'm struggling with refactoring this so it's clean and works. What is the best way to do this if I'm adding Component3 both to the toggle selectors and the component import?

import Component1 from "./component1";
import Component2 from "./component2";

class App extends Component {
    constructor(props) {
        super(props);

        // this.toggle = this.toggle.bind(this);
        this.state = {
            popoverOpen: false,
            isPurchase: true,
        };

        this.switchState = this.switchState.bind(this);
    }

    switchState(flag) {
        this.setState({ isPurchase: flag });
    }
    render() {
        return (
              <div className={styles.cardBody}>
                                        <div className={styles.row}>
                                            <div className={styles.col12}>
                                                <div
                                                    className={`${
                                                        styles.positionRelative
                                                    } ${styles.formGroup}`}>
                                                    <div
                                                        style={{
                                                            fontWeight:
                                                                "bolder",
                                                            color: "#7192a6",
                                                        }}>
                                                        <span
                                                            className={
                                                                this.state
                                                                    .isPurchase
                                                                    ? `${
                                                                          styles.switchState
                                                                      }`
                                                                    : `${
                                                                          styles.switchState
                                                                      } ${
                                                                          styles.unselected
                                                                      }`
                                                            }
                                                            onClick={() => {
                                                                this.switchState(
                                                                    true,
                                                                );
                                                            }}>
                                                            Component1{" "}
                                                        </span>
                                                        /
                                                        <span
                                                            className={
                                                                this.state
                                                                    .isPurchase
                                                                    ? `${
                                                                          styles.switchState
                                                                      } ${
                                                                          styles.unselected
                                                                      }`
                                                                    : `${
                                                                          styles.switchState
                                                                      }`
                                                            }
                                                            onClick={() => {
                                                                this.switchState(
                                                                    false,
                                                                );
                                                            }}>
                                                            {" "}
                                                            Component2
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className={styles.row}>
                                            <div className={styles.col12}>
                                                <Component1
                                                    isPurchase={
                                                        this.state.isPurchase
                                                    }
                                                />
                                                <Component2
                                                    isPurchase={
                                                        this.state.isPurchase
                                                    }
                                                />
                                            </div>
                                        </div>
                                    </div>
        );
    }
}

And in the component itself I'm checking this in the state

class Component1 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isPurshase: props.isPurchase,
            popoverOpen: false,

        };
    }

And inside the return display/hide this way

<div style={{ display: this.props.isPurchase ? "" : "none" }}>

Answer 1

You can do something like this to be more clean.

class App extends Component {
    state = {
        condition: 'condition1',
    };

    handleSwitch = () => {
        const {condition} = this.state;
        let newCondition = '';
        switch (condition) {
            case 'condition1':
                newCondition = 'condition2';
                break;
            case 'condition2':
                newCondition = 'condition3';
                break;
            case 'condition3':
                newCondition = 'condition1';
                break;
            default:
                newCondition = 'condition1';
        }

        this.setState({
            condition: newCondition,
        });
    };

    renderSwitch = () => {
        <button onClick={() => this.handleSwitch()}> CHANGE </button>;
    };

    renderComponent = () => {
        const {condition} = this.state;
        switch (condition) {
            case 'condition1':
                return (<ComponentOne/>);
            case 'condition2':
                return (<ComponentTwo/>);
            case 'condition3':
                return (
                    <div>
                        <ComponentOne/>
                        <ComponentOne/>
                    </div>
                );
            default:
                return null;
        }
    }

    render() {
        return (
            <div>
                {this.renderSwitch()}
                {this.renderComponent()}
            </div>
        );
    }
}