在 React 中使用 Props 进行干燥答案

【问题标题】：DRY with Props in React在 React 中使用 Props 进行干燥
【发布时间】：2020-04-30 18:27:33
【问题描述】：

我们有一个组件。我们称之为<MyComponent>。它被用于十几个不同的文件中。我们想改变这个组件的样式。幸运的是，该组件公开了一个属性stylingProps。因此，我们在十几个文件中的每一个中都写了以下内容：

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

我应该如何重构它，以免在十几个不同的文件中添加具有完全相同值的常量styles？这样做的“反应方式”是什么？

【问题讨论】：

你能改一下MyComponent吗？如果没有，创建一个新的MyUpdatedComponent，它只返回<MyComponent style={{/**/}} {...props} />
你不需要 React 方式，只需要基本的 JavaScript/编程 - 有一个合理的默认值。
您可以创建一组 HOC 组件。
我假设您有 3-4 种不同的方式来设置 MyComponent 的样式。您可能会创建 3-4 个不同的组件，例如 MyComponentWrapper1、MyComponentWrapper2 等，并在其中封装不同的样式。
然后包装它。

标签： reactjs refactoring dry

【解决方案1】：

我喜欢为应用创建通用组件，这些组件在后台使用库组件。我的应用程序的其余部分使用这些通用组件，而无需了解外部库组件。然后，我可以使用我的通用组件创建一个界面，我的应用可以使用该界面来控制其在不同状态下的外观或行为。

例如，假设您的<MyComponent> 是来自组件库的按钮。在此示例中，假设您的应用具有三个按钮变体，我将其称为“主要”、“次要”和“默认”。

目标是在您的应用中，您可以导入自定义的Button 组件，并像这样使用它：

<Button variant="primary" arbitraryProp={data}>Button Text</Button>

variant="primary" 会以特定方式着色/设置样式。

构建Button 组件来处理此问题的一种方法是：

import ComponentLibraryButton from "component-library";
import React from "react";

function Button({ variant, ...rest }) {
  const styles =
    variant === "primary"
      ? { color: "purple", background: "gold" }
      : variant === "secondary"
      ? { color: "green", background: "blue" }
      : { color: "black", background: "gray" };

  return <ComponentLibraryButton {...rest} styles={styles} />;
}

我喜欢创建这样的层，它位于组件库和我的应用程序的其余部分之间。它可以很容易地创建这样的自定义控件，而且还可以在以后更换新的组件库，而无需更改所有使用组件的文件。

【讨论】：