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

Question

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

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

我正在使用 styled-components 并通过组件传递属性。这是我如何通过 attr 的图片。

passing boolean custom attr as "comingsoon"

styled-components css props

Answer 1

只需将其改为数字即可，这是 https://github.com/styled-components/styled-components/issues/1198 的解决方法：

Answer 2

试试这个：

comingsoon={value ? 1 : 0}

Answer 3

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

comingsoon={value ? 1 : undefined}

Answer 4

就我而言，这是因为我不小心将 {...@props} 传递给 div。

通常传递 attribute={false} 没问题，但传递给原生元素则不行。

Answer 5

从 5.1 开始，您现在可以使用 transient props ($) 来防止将道具传递给 DOM 元素。

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

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

Answer 6

您必须为属性添加 $ 前缀：

$comingsoon={value}

Styled Components 在 5.1 版本中添加了 transient props： https://styled-components.com/docs/api#transient-props

Answer 7

styled-components 的这个错误似乎是由于 styled() 试图将布尔值应用于 DOM 中的元素，但 DOM 元素只接受字符串作为属性。

这在 styled-components 存储库中有详细记录：https://github.com/styled-components/styled-components/issues/1198

有两种解决方案：

将带有传递属性的样式化组件向上提起，这样属性就不会直接应用于元素。或者，
在调用样式化组件时从 props 中过滤掉传递的属性。

这两个选项都在下面的代码中进行了演示。

代码沙箱：https://codesandbox.io/s/cool-thunder-9w132?file=/src/App.tsx

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;

Answer 8

通过用方括号 {} 括起我通过 props.

的 boolean 变量解决了这个问题

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

Answer 9

如果样式化组件的属性的名称存在于 HTML 中，也会导致此警告。例如，我在命名为属性 wrap 时遇到了这样的问题。重命名后警告消失。

Answer 10

在您的布尔值前添加“+”。

comingsoon = {+creator.comingSoon}

下面的示例来自 Link to answer

import styled from "styled-components";
import { Link } from "react-router";

const StyledLink = styled(Link)`
  color: ${({ inverted }) => (inverted ? "white" : "chartreuse")};
`;

function Navbar() {
  return (
    <nav>
      {# Bad #}
      <StyledLink inverted={true}>Home</StyledLink>

      {# Good #}
      <StyledLink inverted={+true}>About</StyledLink>
    </nav>
  );
}

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

Warning: Received `false` for a non-boolean attribute. How do I pass a boolean for a custom boolean attribute?

reactjs

styled-components

react-16