Избегайте двойных компонентов с одноэлементными компонентами

Question

Я часто создаю компоненты, стилизованные под styled-component, которые состоят только из одного элемента, например:

const StyledButton = styled.button({
  color: '#fff',
  borderRadius: '2px'
})

const Button = ({ children, ...rest }) => (
  <StyledButton {...rest}>{children}</StyledButton>
)

export default Button

Чувствуется избыточным наличие вложенных компонентов. Есть ли более лаконичный способ выполнить вышесказанное?

1. Я пытался сделать export default, но тогда инструменты React dev не распознаюткомпонент и отображает его как «Неизвестный».

2. Насколько я понимаю, невозможно передать children в styled-component?

Answer 1

Если вы просто хотите визуализировать дочерние элементы и передавать реквизиты, нет необходимости создавать дополнительный компонент Button.Вместо этого вы можете просто экспортировать StyledButton и использовать его следующим образом:

<StyledButton onClick={buttonProp}>Children you want</StyledButton>

При таком подходе вы можете пропустить имена компонентов, они отображаются как styled.button в devtools.Чтобы преодолеть это, есть два метода в зависимости от версии.

1. Используйте babel плагин для стилизованных компонентов.Вы можете установить его с помощью

   npm install --save-dev babel-plugin-styled-components

   и использовать его, добавив его в плагины babel:

   {"plugins": [" babel-plugin-styled-components "]}

2. Если у вас 4.0 или выше, вы можете использовать babel macro Просто измените ваш импортдо:

   import styled from 'styled-components/macro';
   
   const StyledButton = styled.button`
     color: red;
   `
   

Answer 2

Вам не нужно вкладывать элемент, вы можете экспортировать его напрямую.

<SomeComp {...rest}>{children}</SomeComp>

эквивалентно

<SomeComp {...props} />

, поэтому вам не нужно разлучать детей и вкладывать их в гнездо.