reactjs 警告：收到非布尔属性的“false”。如何为自定义布尔属性传递布尔值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49784294/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Warning: Received `false` for a non-boolean attribute. How do I pass a boolean for a custom boolean attribute?
提问by desilijic
Warning: Received `false` for a non-boolean attribute `comingsoon`.
If you want to write it to the DOM, pass a string instead:
comingsoon="false" or comingsoon={value.toString()}.
How do I pass a boolean in a custom attribute for React?
如何在 React 的自定义属性中传递布尔值？
I'm using styled-components and passing the attribute through the component. Here is a picture of how I'm passing the attr.
我正在使用样式组件并通过组件传递属性。这是我如何传递 attr 的图片。
回答by Frank Lin
Try this instead:
试试这个：
comingsoon={value ? 1 : 0}
回答by Cubed Eye
Just make it a number instead, this is the workaround from https://github.com/styled-components/styled-components/issues/1198:
只需将其改为一个数字，这是来自https://github.com/styled-components/styled-components/issues/1198的解决方法：
回答by oskare
Similar to Frank Lins answer above but I had to use undefined instead of 0 to get rid of the warning:
类似于上面的 Frank Lins 回答，但我不得不使用 undefined 而不是 0 来消除警告：
comingsoon={value ? 1 : undefined}
回答by Funkodebat
In my case, it was because I was accidentally passing {...@props}down into a div.
就我而言，那是因为我不小心传入{...@props}了一个 div。
Usually passing attribute={false}is fine, but not to native elements.
通常传递attribute={false}是好的，但不是原生元素。
回答by Alex Boukin
Had a similar problem. The keyword 'value' is a reserved keyword. Try using something else.
有类似的问题。关键字“value”是保留关键字。尝试使用其他东西。
For example, this will produce the error because the 'alt' keyword is reserved:
例如，这将产生错误，因为 'alt' 关键字被保留：
<StyledButton alt={variable}>Button Text</StyledButton>
This however, will not produce the error:
但是，这不会产生错误：
<StyledButton changeIt={variable}>Button Text</StyledButton>
