带有 React 组件的策略模式

Question

I'm trying to use the strategy pattern inside a react component to render different functions instead of using a switch case just for learning purposes but i'm not sure where to start.

Would it be a good way to do it?

    const renderField = () => {
        switch (field) {
            case 1:
                return first();
            case 2:
                return second();
            default:
                return third();
        }
    };

    return <div>{renderField()}</div>;

Answer 1

you would just use React children . Strategy Pattern is a way to not need to change the base component but change some behaviour dynamically from the ouside.

const MyComponent = ({children}) => <div>{children}<div>

<MyComponent><FirstComponent></FirstComponent></MyComponent>

However if you want to pass in a children based on some other values eg 1, 2, 3 .

you could create a Object that holds their Relations to the components:

const componentMap = {1: <FirstComponent/>, 2: <SecondComponent/>}

and then use it like this:

<MyComponent>{componentMap[index]}</MyComponent>