如何将自定义数据属性传递给样式化组件？答案

【问题标题】：How to pass custom data-attribute to styled component?如何将自定义数据属性传递给样式化组件？
【发布时间】：2022-01-08 00:03:13
【问题描述】：

我有这个 Styled 组件，我试图将来自 props 的 DATA 属性传递给它。（这是我们在 Stack Overflow 上的解决方案）

export const InlineEditReadViewErrorContainer = styled.div.attrs(props => ({
  'data-cy': props.dataCy
}))`
  border: 2px solid #de350b;
  border-radius: 3px;
`;

这就是我在代码中使用这个样式化组件的方式

 <InlineEditReadViewErrorContainer dataCy='blabla'>
   {readView}
 </InlineEditReadViewErrorContainer>

但这并没有改变任何东西

【问题讨论】：

标签： javascript reactjs styled-components custom-data-attribute

【解决方案1】：

我认为我们必须正确使用在 React 中添加到组件的属性，如果只需要它们来设置组件的样式。

我们应该尽可能多地使用本机属性，但不会损害客户端在浏览器中显示的 HTML 中公开的私有数据，因此：

如果你要使用data-attributes：

记住如何命名这些属性：属性名称不应包含任何大写字母，并且必须在前缀“data-”后至少有一个字符

注意：我只会使用最简单的方法，用布尔值给出一组属性作为描述的第一个答案，例如：

component.js

<Error data-active={true}>
   {readView}
</Error>

component.styles.js

export const Error = styled.div`
  &[data-active="true"] {
    border: 2px solid #de350b;
    border-radius: 3px;
  }
`;

如果您想使用自定义道具而不像第二条评论所述的那样将它们显示在 DOM 中，请使用 transient props：

示例：

component.js

<Error $active={true}>
   {readView}
</Error>

component.styles.js

export const Error = styled.div`
  ${({$active}) => $active ? css`
     border: 2px solid #de350b;
     border-radius: 3px;
  `: null}
`;

【讨论】：

【解决方案2】：

该道具应该已经“通过”，因为它将显示在组件上以便在赛普拉斯中使用它。如果你想在内部使用它，你也可以使用 transient 这样的道具

const Comp = styled.div`
  color: ${props =>
    props.$draggable || 'black'};
`;

render(
  <Comp $draggable="red" draggable="true">
    Drag me!
  </Comp>
);

【讨论】：

【解决方案3】：

这要容易得多。您可以在使用样式组件的地方直接传递 data 属性，一切都会好起来的。

<InlineEditReadViewErrorContainer data-cy='dateInput'>
 {textValue}
</InlineEditReadViewErrorContainer>

【讨论】：