Reactjs 警告：收到非布尔属性的'false'。如何为自定义布尔属性传递布尔值？

如何在React的自定义属性中传递布尔值

我正在使用样式化组件并通过组件传递属性。这是一张我通过attr的照片

---

只需将其设为一个数字即可，这是以下解决方法：

试试这个：

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()}.

---

与上面Frank Lins的回答类似，但我必须使用undefined而不是0来消除警告：

comingsoon={value ? 1 : 0}

---

在我的例子中，这是因为我不小心将

{…@props}

传递到一个div中

---

通常传递

attribute={false}

是可以的，但不能传递给本机元素。

从

5.1

开始，您现在可以使用它来防止道具传递给DOM元素

comingsoon={value ? 1 : undefined}

const Comp=styled.div`
颜色：${props=>
道具。$draggable | |‘黑色’}；
`;
渲染(
拖我！
);

您必须在属性中添加

$

前缀：

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

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

样式化组件在5.1版本中添加了瞬态道具：

---

使用

样式化组件时出现此错误似乎是由于
样式化（）
尝试将布尔值应用于DOM中的元素，但DOM元素仅接受字符串作为属性

这在
样式化组件
存储库中有很好的记录：

有两种解决方案：

将带有传递属性的样式化组件向上提升，这样属性就不会直接应用于元素。或者


调用样式化组件时，从道具中过滤传递的属性


下面的代码演示了这两个选项

代码沙盒：

import React，{useState}来自“React”；
从“样式化组件”导入样式化；
//演示解决样式化组件错误的两种不同解决方案：
//`Warning:收到非布尔属性的`false``
//解决方案1：将属性提升到包装器中。
//解决方案2：过滤掉传递给样式化组件的“toggle”属性。
接口BtnProps{
切换：布尔；
}
const Container=styled.div`
宽度：100%；
高度：500px；
显示器：flex；
弯曲方向：行；
证明内容：周围的空间；
对齐项目：居中；
`;
const StyledBtnOne=styled.div`
&钮扣{
背景色：${（{toggle}）=>toggle？'#2ecc71'：'''}；
};
`;
constyledbtntwo=styled（（{primary，…props}）=>
propz）（props）}/>）`
背景色：${（{toggle}）=>toggle？'#3498db'：'''}；
`;
常量应用=（）=>{
const[btnOne，setBtnOne]=useState（false）；
const[btnTwo，setBtnTwo]=useState（false）；
常量触发器=（）=>setBtnOne（！btnOne）；
常量触发器二=（）=>setBtnTwo（！btnTwo）；
返回(
解决方案1
解决方案2
);
}
导出默认应用程序；
通过用括号{}括住我通过props传递的布尔变量，解决了这个问题

import React, { useState } from "react";
import styled from 'styled-components';

// demonstration of two different solutions for solving the styled-components error:
// `Warning: Received `false` for a non-boolean attribute`
// Solution 1: Lift the attribute up into a wrapper.
// Solution 2: Filter-out the `toggle` attribute passed to styled-component.

interface BtnProps {
  toggle: boolean;
}

const Container = styled.div`
  width: 100%;
  height: 500px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
`;

const StyledBtnOne = styled.div<BtnProps>`
  & button {
    background-color: ${({toggle}) => toggle ? ' #2ecc71' : '' };
  };
`;

const StyledBtnTwo = styled(({primary, ...props}) =>
  <button {...(({toggle, ...propz}) => propz)(props)} />)<BtnProps>`
  background-color: ${({toggle}) => toggle ? ' #3498db' : '' };
`;

const App = () => {

  const [ btnOne, setBtnOne ] = useState(false);

  const [ btnTwo, setBtnTwo ] = useState(false);

  const triggerOne = () => setBtnOne(!btnOne);

  const triggerTwo = () => setBtnTwo(!btnTwo);

  return (
    <Container>
      <StyledBtnOne toggle={btnOne}>
        <button 
          onClick={triggerOne}>
            Solution 1
        </button>
      </StyledBtnOne>

      <StyledBtnTwo 
        toggle={btnTwo}
        onClick={triggerTwo}>
        Solution 2
      </StyledBtnTwo>
    </Container>
  );

}

export default App;


这会将值传递给DOM，而对于样式化组件，它并不是您真正想要的。尽管这是一个删除警告的简单方法。使用相同的链接，我找到了这个解决方案（），尽管有人说它不是最好的。这对我很有效。为什么这是有效的，而不是布尔型的？我每隔两周左右就会回到这个问题上来，因为我经常遇到这个问题，我甚至在下面写了一个备选方案。但这必须是最好的解决方案，因为DOM拒绝布尔值
import React, { useState } from "react";
import styled from 'styled-components';

// demonstration of two different solutions for solving the styled-components error:
// `Warning: Received `false` for a non-boolean attribute`
// Solution 1: Lift the attribute up into a wrapper.
// Solution 2: Filter-out the `toggle` attribute passed to styled-component.

interface BtnProps {
  toggle: boolean;
}

const Container = styled.div`
  width: 100%;
  height: 500px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
`;

const StyledBtnOne = styled.div<BtnProps>`
  & button {
    background-color: ${({toggle}) => toggle ? ' #2ecc71' : '' };
  };
`;

const StyledBtnTwo = styled(({primary, ...props}) =>
  <button {...(({toggle, ...propz}) => propz)(props)} />)<BtnProps>`
  background-color: ${({toggle}) => toggle ? ' #3498db' : '' };
`;

const App = () => {

  const [ btnOne, setBtnOne ] = useState(false);

  const [ btnTwo, setBtnTwo ] = useState(false);

  const triggerOne = () => setBtnOne(!btnOne);

  const triggerTwo = () => setBtnTwo(!btnTwo);

  return (
    <Container>
      <StyledBtnOne toggle={btnOne}>
        <button 
          onClick={triggerOne}>
            Solution 1
        </button>
      </StyledBtnOne>

      <StyledBtnTwo 
        toggle={btnTwo}
        onClick={triggerTwo}>
        Solution 2
      </StyledBtnTwo>
    </Container>
  );

}

export default App;


     const childrenWithProps = React.Children.map(props.children, child => {
        return React.cloneElement(child, {showcard : {showCard} }
        )});