我正在发现React，我认为有一些东西我没有正确理解。在显示事物之前，我应该把计算事物的代码放在哪里？传统MVC中的模型是什么？假设我的应用程序处理水果，我想显示它们的列表。所以我从API那里得到了这个列表(类似于[{type: banana, boughtDate: 2021-01-03}, {type: apple, boughtDate: 2021-01-02}]，将其交给FruitsList组件，该组件循环并生成FruitRow组件。现在，我想以黄色显示香蕉的每一行。我可以在我的行组件中添加一个style="color: yellow"，并以水果类型为条件。但是，如果我想在我的应用程序中显示香蕉的每个地方都有这种颜色呢？这会在每个组件中重复这种if。WReact对此的解决方案是什么？
我想，我可以有一个"utils"文件，其中有一个函数，它接受一个水果并返回颜色，但这听起来像是一种非常2005年的编码方式。我感到困惑的是，在Java或我所在的其他对象语言中，我会在Fruit类上有一个getColor()方法，Banana子类会覆盖它以返回黄色。或者至少我只能在Fruit类的getColor方法中使用if (type === "banana")一次。我可以(也应该(尝试用Javascript类在React中重新创建该模型吗？所以我的逻辑；代码只在一个地方，然后我可以有像Row这样的通用组件，它将内容和颜色作为道具，而不是Fruit？如果是，我应该把这个代码放在哪里？
编辑：在网络上搜索，官方React文档链接到Pete Hunt 2013年在Facebook上的这篇演讲，他说："只在组件中放入显示逻辑，我并不主张将所有的模型验证代码、获取和数据访问都放入组件中，您可能希望将它们放入第三方库中，这些库与您的组件有某种桥梁，但只在您的组件中放入有意义的逻辑">
所以我想这就是我所说的，有没有关于这些"；桥"；，你把这个逻辑放在哪里？
在您想要渲染任何碰巧具有type: banana的东西的地方执行此操作
<BananaType>
<WhateverYouWantToPutHere/>
</BananaType
并像这样定义BananaType：
const BananaType = props => <div style="color: yellow">{props.children}</div>
您也可以向BananaType组件添加逻辑(例如，从API获取缩略图(。只需这样做：
const BananaType = props => {
const fetched_stuff = someHandyFunctionForFetchingStuff();
return <div><div>{fetched_stuff}</div>{props.children}</div>
}
如果你只想做一些逻辑，而根本不想更改DOM，那么就这样做：
const BananaType = props => {
// Do whatever stuff you want to do here
return props.children;
}
我可以有一个"utils"文件，其中包含一个函数，我想它会获取一个水果并返回颜色，但这听起来像是一种非常2005年的编码方式。
绝对不是！让反应如此强烈的一件事是，它能很好地配合现有的公认做法，并为你提供选择。让我们看看你描述的问题，看看我们可能会想出什么解决方案。
现在，我想用黄色显示每一行香蕉。我可以添加样式＝"；颜色：黄色；在我的行组件中，条件是水果类型。
所以这里要做的一个重要区别是，你只想对行进行样式设置，还是想对"bananna"；处处
但是如果我想在我的应用程序中显示香蕉的每个地方都有这种颜色呢？这将在每个组件中重复这种if。
选项1
在这种情况下，您可以COULD创建一个<Bananna />组件(以及每个其他水果(并进行渲染，这意味着您只需要对该组件进行样式设置，在一个位置更改它将影响所有其他组件。
选项2
使用您描述的方法，并将其保存在helper/utils文件中。自2016年年中以来，我一直在研究react应用程序，我仍然发现有必要在单独的文件中使用可重复使用的逻辑。
选项3
您的第二种选择可能是使用css模块来实现这种方法，使用css模块可以在组件中执行类似css[bananna]的操作，这将应用样式并防止需要使用switch语句。