警告：收到非布尔属性“border”的“false”。在反应？

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 props转发给Card.Header，因为Card.Header没有border prop，会将border prop转发给同样不支持border prop的底层div。如果不是border，请使用shouldForwardProp 选项和转发道具。

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'};
    `;

1. 如果您不想使用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'};

`)

Answer 2

表达式可以计算为布尔值，试试

export const CardHeader = styled(Card.Header)<CardHeaderProps>`
  border-bottom: ${({hasBorder}) => hasBorder ? `1px solid #dad8d8` : `none` ;
`;