Question

期望的结果

我希望有一个可重复使用的组件，由标题和数字组成。

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

作为道具发送

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

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

问题

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

我的想法

我认为在组件内部，我会有一个

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

我将需要至少六种不同的情况，可能（实际上，可能）更晚，因此可扩展性是一个重要因素。

这是这样做的方式，还是我忽略了什么？

Answer 1

我会从您的组件中分离计算器逻辑，让组件担心渲染视图。只需使组件依赖于计算器，它就可以扩展并可重复使用。

这是一个将所有计算器都放在一个文件中的示例，但您当然不必这样做，如果您需要，每个计算器都可以放在自己的文件中（因此这种方法可以提供灵活性）。

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

Answer 2

我认为我对@ jennas的做法略有不同意见。我认为组件应该只接收title和number的简单字符串/整数，并且计算逻辑应该在层次结构中某处的父组件或容器中完成。

考虑到这一点，你为每种类型的计算编写了不同的函数，为什么还要把它传递给组件呢？为什么不在组件外部进行计算并传递一个普通值？

这实现了两个目标：

你还有一个愚蠢的组件，这很好，因为：
- 哑组件更简单，更易于测试和共享
- 该组件的消费者不需要知道它是如何工作的，他们只需知道它需要什么。例如，函数需要在哪些值上进行计算？
您可以将应用程序逻辑集中在更加容易管理的中心位置

然而，为了充分回答这个问题，我认为知道会有所帮助：

这个组件是什么？
它的背景是什么？
- 这是一个带有＆＃34;在2天内到期的待办事项＆＃34;注意到？
- 它是一个可拖动的，其x和y坐标是在鼠标移动时计算的吗？
还有谁会使用它？只有你？其他人？

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

2 个答案: