Question

我构建了一个切换组件，该组件根据Purchase是否为真显示两个组件中的一个。现在，我想从3个组件中进行选择，而我正努力对其进行重构，以使其干净并可以正常工作。如果将Component3都添加到切换选择器和组件导入中，最好的方法是什么？

  for i := len(toCheck) - 2; i >= 0; i = i-2 {
        v,_ := strconv.Atoi(string(toCheck[i]))
        toSum = append(toSum, v)
    }

在组件本身中，我正在检查状态

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

在返回显示中/以这种方式隐藏

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

        };
    }

Answer 1

您可以做这样的事情以使其更干净。

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

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

1 个答案: