javascript - react 中出现警告 : Received `false` for a non-boolean attribute `border` .？

Question

我。我的状态低于警告。我不知道我哪里做错了。我在演示应用程序中使用样式组件。

react_devtools_backend.js:4061 Warning: Received `false` for a non-boolean attribute `border`.

If you want to write it to the DOM, pass a string instead: border="false" or border={value.toString()}.

If you used to conditionally omit it with border={condition && value}, pass border={condition ? value : undefined} instead.

我很喜欢这个。我创建了一个这样的组件。我还添加了一些控制台来调试。这是我的调试语句

 console.log('========',depth,depth === 1);

调试语句输出 ======== 3 错误

5MobileHeader.tsx:63 ======== 4 false
MobileHeader.tsx:63 ======== 3 false
3MobileHeader.tsx:63 ======== 4 false

组件调用

组件定义

interface CardHeaderProps {
  border: boolean;
}

export const CardHeader = styled(Card.Header)<CardHeaderProps>`
  background-color: transparent;
  border-radius: 0 !important;
  border: 0;
  padding: 10px 20px;

  ${props =>
    props.border &&
    css`
      border-bottom: 1px solid #dad8d8;
    `}
`;

Answer 1

您可以做两件事。

1. 不要将 border 属性转发到 Card.Header，因为 Card.Header 没有 border 属性，并且会将 border 属性转发到底层 div 也不支持 border 属性。如果不是 border，请使用 shouldForwardProp 选项和forward prop。

https://styled-components.com/docs/api#shouldforwardprop (如果您使用 mui 风格也适用)

   export const CardHeader = styled(Card.Header, { shouldForwardProp: (prop)=> prop !== 'border'})<CardHeaderProps>`
        background-color: transparent;
        border-radius: 0 !important;
        border: 0;
        padding: 10px 20px;
        border-bottom: ${(props) => props.border ? '1px solid #dad8d8' : 'none'};
    `;

如果您不想使用 shouldForwardProp(您应该使用它，请参阅上面的链接)，则使用

 <CardHeader border={depth === 1 ? 1 : 0}> // instead of true/false. When u inspect the element you will see the border prop after rendering.

更简洁的代码

export const CardHeader = styled(Card.Header, { shouldForwardProp: (prop)=> prop !== 'border'})(({ theme, border })`
    border-bottom: ${border ? 'some code' : 'none'};

`)