Используйте синтаксис Spread для перезаписи или добавления стилей в React

Использование переменных для встроенных стилей в React - отличный способ применить шаблон стиля к нескольким элементам в ваших компонентах. См. ниже.

import React from 'react'
const MyComponent = () =>{
  const myDivStyle = {
    color: 'green',
    textAlign: 'center',
    fontSize: 25
  }
  return (<div style={myDivStyle}>
      Hello World.
  </div>)
}
export default MyComponent;

В этом примере div в MyComponent будет стилизован на основе параметров, установленных в myDivStyle. Это замечательно, потому что вы хотите включить в свой компонент больше элементов с теми же встроенными стилями, вы можете просто передать myDivStyle всем элементам, которым вы хотите иметь этот стиль.

const MyComponent = () =>{
  const myDivStyle = {
    color: 'green',
    textAlign: 'center',
    fontSize: 25,
    border: 'solid 1px 'green'   
}
return (<div>
      <div style={myDivStyle}>Hello World.</div>
      <div style={myDivStyle}>Goodbye World.</div>
      <div style={myDivStyle}>Hello again,  World.</div>
      <div style={myDivStyle}>OK, Goodbye World (this time for real).</div>
    </div>)
}
export default MyComponent;

Теперь ко всем этим div будет применен один и тот же стиль. Но что, если вы хотите, чтобы буквы div, содержащие Goodbye, имели красный цвет шрифта, а не зеленый? Вы можете создать новую переменную, которая будет применяться только к div, содержащим Goodbye.

const helloDivStyle = {
    color: 'green',
    textAlign: 'center',
    fontSize: 25,
    border: 'solid 1px green'}
const goodbyeDivStyle = {
    color: 'red',
    textAlign: 'center',
    fontSize: 25,
    border: 'solid 1px green'
}

Это работает, но есть более простой способ сделать это. Эти переменные стиля практически одинаковы, за исключением цвета. Это означает, что нам не нужно инициализировать другой, чтобы изменить один параметр . Этот код не очень СУХИЙ. Мы можем сделать этот код более СУХИМ, используя синтаксис распространения.

Синтаксис Spread позволяет нам использовать три периода для расширения итераций, таких как массивы или объекты, и наследования значений исходных итераций.

var arr1 = [1, 2, 3, 4]
var arr2 = [...arr1]
console.log(arr1, arr2)
> (4) [1, 2, 3, 4] (4) [1, 2, 3, 4]

В нашем случае мы можем использовать оператор распространения для добавления или перезаписи дополнительных параметров стиля. См. ниже.

const MyComponent = () =>{
const helloDivStyle = {
    color: 'green',
    textAlign: 'center',
    fontSize: 25,
    border: 'solid 1px green'
}
return (<div>
      <div style={myDivStyle}>Hello World.</div>
      <div style={{...myDivStyle, color: 'red'}}>Goodbye World.</div>
      <div style={myDivStyle}>Hello again,  World.</div>
      <div style={{...myDivStyle, color: 'red'}}>OK, Goodbye World (this time for real).</div>
    </div>)
}
export default MyComponent;

Таким образом, мы можем добавить изменяющийся параметр стиля к элементам Goodbye без необходимости создавать новую переменную стиля. Однако, если вы хотите заменить более одного параметра стиля, может быть более эффективным создать другую переменную. Даже если мы создадим новую переменную стиля, мы можем использовать оператор распространения, чтобы сделать наш код более СУХИМ, но на этот раз в новой переменной.

const helloDivStyle = {
    color: 'green',
    textAlign: 'center',
    fontSize: 25,
    border: 'solid 1px green'
}
const goodbyeDivStyle = {
    ...helloDivStyle,
    color: 'red',
    border: 'solid 1px red',
    margin: 10
}

Несмотря на то, что мы создаем новую переменную, мы избегаем повторяющегося назначения стиля, используя оператор распространения. В этом случае goodbyeDivStyle будет иметь весь стиль, предоставленный helloDivStyle, и изменять только те, которые находятся за пределами этой переменной (в данном случае color, border и margin). В этом примере вы также можете увидеть, как оператор распространения работает как с перезаписью унаследованных стилей (color , так и border), так и с добавлением новых параметров стиля к унаследованным (margin).

Обновите бесплатную подписку на Medium до платной, и всего за 5 долларов в месяц вы получите неограниченное количество рассказов от тысяч писателей без рекламы. Это партнерская ссылка, и часть вашего членства помогает мне получать вознаграждение за контент, который я создаю. Спасибо!

использованная литература

Примечание на простом английском

Вы знали, что у нас четыре публикации и канал на YouTube? Вы можете найти все это на нашей домашней странице plainenglish.io - проявите немного любви, подписавшись на наши публикации и подписавшись на наш канал YouTube!