Сборник рассказов: объекты недопустимы в качестве дочерних элементов React, если после .attrs не используются обратные пометки - PullRequest
Новая
       24

Сборник рассказов: объекты недопустимы в качестве дочерних элементов React, если после .attrs не используются обратные пометки

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

У меня есть следующие простые styled-component: 

const Button = styled.bytton.attrs(({primary}) => ({
  className: primary ? 'something' : 'something-else'
})

Теперь по какой-то причине, если я не добавлю галочки в редакторе, такие как: 

const Button = styled.bytton.attrs(({primary}) => ({
  className: primary ? 'something' : 'something-else'
})`` // here

Я получу ошибку из сборника рассказов:

Объекты недопустимы как дочерние элементы React (найдено: объект с ключами {$$ typeof, render, attrs,> componentStyle, displayName, foldedComponentIds, styledComponentId, target, withComponent,> warnTooManyClasses , нанизывать}). Если вы намеревались визуализировать коллекцию дочерних элементов, используйте вместо этого массив>.

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

Ответы [ 2 ]

2 голосов
/ 13 апреля 2020

Если все, для чего вы используете API стилевых компонентов, - это создание общих компонентов, которые разделяют логику c вокруг переключения classNames, вы можете просто создать компонент более высокого порядка. 

function withProps(Component, propSetter) {
  return (props) => {
    const additionalProps = propSetter(props)
    return <Component {...props} {...additionalProps} />
  }
}

const Button = withProps('button', ({ primary }) => ({
  className: primary ? 'something' : 'something-else'
})

Но чтобы приведите контекст исходного вопроса:

Упомянутые обратные пометки не так случайны, как может показаться. Они могут чувствовать себя странно, когда вы видите их пустыми, но они служат цели. Чтобы понять их назначение, может быть проще взглянуть на то, что на самом деле происходит, когда обратные метки или помеченные литералы шаблона компилируются в обычные JavaScript. 

// Before
styled.button`
  color: green;
`

// After
styled.button(['color: green;'])

Как вы можете видеть, строка была передана в функция, которая возвращается из styled.button, styled.attrs возвращает ту же функцию. Теперь приведенный выше пример не сильно использует силу обратных галочек. Настоящая сила исходит от вызовов функций. 

// Before
styled.button`
  color: ${props => props.theme.color};
`

// After
styled.button(['color: ', ';'], props => props.theme.color)

Как вы можете видеть, он отделил шаблон от входов. Первый аргумент функции является шаблоном, а следующие аргументы являются входными данными, которые go после каждой части в массиве. Вот как стилизованные компоненты могут передавать вам реквизиты для выполнения специальных действий в ваших компонентах.

styled.button и styled.button.attrs() оба возвращают функцию, которая будет вызываться таким образом с литералами тегового шаблона. Если бы они вернули взамен рендеримый компонент React, вы бы вообще не смогли предоставить css.

Когда вы пытаетесь визуализировать что-либо без обратных галочек, значение, которое вы имеете в Button, является объектом с информацией, готовой для создания вашего компонента. До тех пор, пока вы не вызовете объект через () или ``, у вас не будет компонента, который вы можете визуализировать.

Если обратные помехи слишком странные, то вам будет удобнее заменить их на () ? В качестве альтернативы вы можете подумать о создании функции-обертки или чего-то такого, чтобы они всегда вызывались.

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

.attrs используется для восстановления реквизитов компонента (со значением по умолчанию или некоторыми операциями) для использования в обычном стиле. 

const Button = styled.button.attrs(props => ({
  layoutSize: props.size || '1em',
}))`
  margin: ${props => props.layoutSize};
  padding: ${props => props.layoutSize};
  ...
`

См. Документ , когда использовать attrs

Если мы хотим использовать реквизит только для стилизации, мы можем использовать его без .attrs

const Button = styled.button`
  margin: ${props => props.marginSize || '1em'};
  padding: ${props => props.paddingSize || '2em'};
  ...
`
...