DRY с опорами в реакции - PullRequest
Новая
       27

DRY с опорами в реакции

0 голосов
/ 30 апреля 2020

У нас есть компонент. Давайте назовем это <MyComponent>. Он используется в дюжине разных файлов. Мы хотели изменить стиль этого компонента. К счастью, компонент предоставляет свойство stylingProps. Итак, мы написали следующее в каждом из дюжины файлов: 

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

Как мне провести рефакторинг, чтобы я не добавлял константу styles с одинаковыми значениями в дюжину разных файлов? Что такое «Реактивный путь» для этого?

1 Ответ

1 голос
/ 30 апреля 2020

Мне нравится создавать общие компоненты для приложения, которые используют компоненты библиотеки под капотом. Остальная часть моего приложения использует эти общие компоненты без каких-либо знаний о компоненте внешней библиотеки. Затем я могу использовать свой общий компонент для создания интерфейса, который мое приложение может использовать для управления его внешним видом или поведением в различных состояниях.

Например, давайте представим, что ваша <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} />;
}

Мне нравится создавать такой слой, который расположен между библиотеками компонентов и остальной частью моего приложения. Это позволяет легко создавать пользовательский элемент управления, подобный этому, а также заменять новую библиотеку компонентов в будущем без необходимости изменения всех файлов, использующих компоненты.

...