在 React 中使用 Props 进行 DRY

Question

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

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

我应该如何重构它，以便我不会在十几个不同的文件中添加具有完全相同值的常量 styles？什么是"the React Way"这样做？

Answer 1

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

例如，假设您的 <MyComponent> 是一个来自组件库的按钮。在此示例中，假设您的应用程序具有三个按钮变体，我将其称为 "primary"、"secondary" 和 "default".

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

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

并且 variant="primary" 将 color/style 以特定方式。

构建 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} />;
}

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

在 React 中使用 Props 进行 DRY

DRY with Props in React

refactoring

dry

reactjs