Как передать пользовательский атрибут стилизованному компоненту в функциональном компоненте?

Я пытаюсь понять, как эта штука работает, но все примеры, которые я нашел, были написаны в стиле класса.

   import React from 'react'
   import styled from 'styled-components/native'

   const MyTag = styled.Button.attrs({
     title: myThisThingValue
   })`
     // some style
     background: thisIsAlsoMyThingValue
   \` 

   export default function MyComponent({ props }) {
     return(
       <MyTag myThisThing="My value" thisIsAlsoMyThing="Other Value" />
         )
   }

Мне просто нужен доступ к моим пользовательским атрибутам в стиле MyTag. Я использовал (props) => {title: props.MyThing } в .attrs(), но это не сработало.

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
8
0
12 788
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Вы будете создавать функции для отдельных атрибутов, а не для всего параметра attrs. Например:

   const MyTag = styled.Button.attrs({
     title: (props) => props.myThisThing
   })`
     background: ${props => props.thisIsAlsoMyThing}
   `

вы могли бы использовать что-то вроде этого

interface Props {
  disabled?: boolean;
}

interface Attrs {
  href?: string;
}

const Link = styled.a.attrs(({ href = "#" }: Attrs) => ({
  href,
  onClickCapture: (event: any) => event.preventDefault()
}))`
  color: ${({ disabled = false }: Props) => (disabled ? "#eee" : "initial")};
`;

а затем использовать его

<Link href="http://google.com" target={"_blank"}>
   Click here
</Link>

У меня есть проблема с другой версией стилизованного компонента:/

это должно работать:

Версия JavaScript:

export const MyTag = styled.button.attrs(props => ({
  title: props.myThisThingValue,
}))`
  background: ${props => props.thisIsAlsoMyThing};
`;

Версия TypeScript:

interface MyTagProps {
  myThisThingValue: string;
  thisIsAlsoMyThing: string;
}

export const MyTag = styled.button.attrs((props: MyTagProps) => ({
  title: props.myThisThingValue,
}))<MyTagProps>`
  background: ${props => props.thisIsAlsoMyThing};
`;

Используй это:

<MyTag myThisThingValue="My value" thisIsAlsoMyThing="red" />

В этом случае title — это defined attribute, но если вам нужен атрибут данных, такой как indexNumber (атрибут не определен), вам нужно будет использовать префикс data-*:

export const TagName = styled.button.attrs((props) => {
  return {
    data-indexNumber: "indexNumber value"
  };
})``;

Использование атрибутов данных

Другие вопросы по теме