带有 React 组件的策略模式

Question

我正在尝试使用 React 组件中的策略模式来呈现不同的功能，而不是仅出于学习目的使用 switch case，但我不确定从哪里开始。

这是个好方法吗？

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

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

Answer 1

你只需要使用 React children。 Strategy Pattern 是一种不需要更改基本组件但从外部动态更改某些行为的方法。

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

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

但是，如果您想根据其他一些值传入子代，例如 1, 2, 3。

您可以创建一个对象来保存它们与组件的关系：

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

然后像这样使用它：

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

带有 React 组件的策略模式

Strategy pattern with React component

strategy-pattern

reactjs