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

Question

我有这个 Styled 组件，我试图在其中传递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>

但这并没有改变任何东西

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

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

• 如果您要使用data-attributes ：

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

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

组件.js

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

组件.styles.js

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

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

样品：

组件.js

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

组件.styles.js

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

Answer 4

也许它与您的捆绑器有关，因为您应该能够将数据属性直接传递给样式化组件。 但是，如果您要扩展现有组件，请注意您需要通过 props 传递它。 这两种情况会将数据属性附加到最终的 HTML：

function Text(props) {
  return (
    <p data-foo={props['data-foo']} className={props.className}>
      {props.children}
    </p>
  );
}

const StyledText = styled(Text)`
  color: blueviolet;
`;

const StyledHeading = styled.h1`
  color: gray;
`;

export default function App() {
  return (
    <div>
      <StyledHeading data-bar="foo">Hello StackBlitz!</StyledHeading>
      <StyledText data-foo="bar">
        Start editing to see some magic happen :)
      </StyledText>
    </div>
  );
}