Question

我试图了解它的工作原理，但是我发现的所有示例都是以类的方式编写的。

   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样式的自定义属性。我在.attrs（）中使用了(props) => {title: props.MyThing }，但是没有用。

Answer 1

在这种情况下，title 是一个 defined attribute，但是如果您需要像 indexNumber 这样的数据属性（未定义的属性），您将需要使用前缀 data-*：

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

Using data attributes

Answer 2

您将为单个属性而不是整个attrs参数创建函数。例如：

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

Answer 3

应该起作用：

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" />

Answer 4

您可以使用类似的东西

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>

我在使用不同版本的样式组件tho'时遇到了一些问题：/

如何将自定义属性传递给功能组件中的样式化组件？

4 个答案: