javascript - 具有不同逻辑的类似 React 组件

Question

期望的结果

我想要一个可重用的组件，由标题和数字组成。

标题很简单，因为它只是一个字符串，我可以使用它作为 Prop 发送

<ReactDOM.render(<MyComponent title="floorp"/>, docu...);

但是对于组件的每个实例，该数字将以不同的方式计算。

问题

有没有办法干净地编写这样的组件？

我的想法

我想在组件内部，我会有一个

calculate: function () {
    switch(title) {
        case 'floorp':
            //...
        case 'not_floorp':
            //...
    }
}

我将需要至少六种不同的情况，以后可能(实际上，可能)更多，因此可扩展性是一个重要因素。

这是这样做的方法，还是我忽略了某些东西？

Answer 1

我会将计算器逻辑与组件分开，只让组件担心渲染 View 。只需使组件依赖于计算器即可扩展并可重用。

这是一个将所有计算器都放在一个文件中的示例，但您当然不必这样做，如果您愿意，每个计算器都可以位于其自己的文件中(因此这种方法为您提供了灵 active )。

calculators.js

var CALCULATORS = {
    add: function(a,b){ return a + b; },
    subtract: function(a,b){ return a - b; },
    suprise: function(){ return Math.random(); }
};

然后您只需将计算器传递给您的组件，如下所示:

<ReactDOM.render(<MyComponent title="floorp" calculator={CALCULATORS.add}/>, docu...);

在你的组件内部:

calculate: function () {
    //This will equate to '30' since we passed it the 'add' calculator above
    return this.props.calculator.call(this, 10, 20); 
}