Reactjs 在反应器中用道具干燥

我们有一个组件。让我们称之为

。它被用于十几个不同的文件中。我们想更改此组件的样式。幸运的是，该组件公开了一个属性

StyleingProps

。因此，我们在十几个文件中的每一个文件中都写了以下内容：

public render() {
   const styles = {color: "purple", background: "gold"}
   return(
      <MyComponent
          otherPropsUniqueToEachfile={"somethingOrOther"}
          styles={styles}
      >
         "Some text"
      </MyComponent>
   )}

public render（）{
常量样式={颜色：“紫色”，背景：“金色”}
返回(
“一些文本”
)}

---

我应该如何重构它，这样我就不会在十几个不同的文件中添加具有完全相同值的常量

样式

？这样做的“反应方式”是什么

我喜欢为应用程序创建通用组件，它使用引擎盖下的库组件。我的应用程序的其余部分使用这些通用组件，而不知道外部库组件。然后，我可以使用我的公共组件创建一个界面，我的应用程序可以使用该界面控制其在不同状态下的外观或行为

例如，假设您的

是来自组件库的按钮。在本例中，让我们假设您的应用程序有三个按钮变体，我称之为“主”、“次”和“默认”

目标是在应用程序中，您可以导入自定义的

按钮

组件，并按如下方式使用它：

按钮文本

而

variant=“primary”

将以特定的方式对其进行着色/样式设置

构建

按钮
组件以处理此问题的一种方法是：

从“组件库”导入组件库按钮；
从“React”导入React；
功能按钮（{variant，…rest}）{
常量样式=
变量==“主要”
？{颜色：“紫色”，背景：“金色”}
：variant==“secondary”
？{颜色：“绿色”，背景：“蓝色”}
{颜色：“黑色”，背景：“灰色”}；
返回；
}

我喜欢创建这样一个层，它位于组件库和我的应用程序的其余部分之间。这样可以很容易地创建自定义控件，而且还可以在不必更改所有使用组件的文件的情况下交换新的组件库。
您可以更改
MyComponent
？如果没有，创建一个新的
MyUpdatedComponent
，它只返回
您不需要反应方式，只需要基本的JavaScript/编程-有一个合理的默认值。您可以创建一组HOC组件。我假设您有3-4种不同的MyComponent样式设置方式。您可以创建3-4个不同的组件，如MyComponentWrapper1、MyComponentWrapper2等，并在其中封装不同的样式，然后进行包装。