警告：收到非布尔属性“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

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

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

Answer 2

您可以做 2 件事。

不要将 border prop 转发给 Card.Header，因为 Card.Header 没有 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'};
    `;

如果你不想使用shouldForwardProp（你应该使用，参考上面的link），那么使用

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

`)

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

Warning: Received `false` for a non-boolean attribute `border`. in react?

javascript

reactjs

styled-components

react-hooks

更简洁的代码样式