경고:비부울 Atribute에 대해 false를 수신했습니다.커스텀 부울 속성의 부울을 전달하려면 어떻게 해야 합니까?

경고:비부울 Atribute에 대해 false를 수신했습니다.커스텀 부울 속성의 부울을 전달하려면 어떻게 해야 합니까?

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의 커스텀 속성에서 부울을 전달하려면 어떻게 해야 합니까?

스타일 컴포넌트를 사용하여 속성을 컴포넌트에 전달합니다.여기 제가 어떻게 아트를 지나가고 있는지 사진이 있습니다.

부울 사용자 지정 특성을 "coming soon"으로 전달

스타일 컴포넌트 CSS 소품

대신 다음을 시도해 보십시오.

comingsoon={value ? 1 : 0}

현재5.1임시 소품을 사용할 수 있게 되었습니다.$)에 의해, 프로포트가 DOM 엘리먼트에 건네지지 않게 됩니다.

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

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

를 추가해야 합니다.$속성 접두사:

$comingsoon={value}

Styled Components는 5.1 버전에서 일시적인 소품을 추가했습니다.

저 같은 경우에는 우연히 지나갔기 때문에{...@props}div로 내려갑니다.

통상은 패스attribute={false}괜찮지만, 원어민에게는 그렇지 않습니다.

위의 Frank Lins 답변과 비슷하지만 경고를 없애려면 0이 아닌 undefined를 사용해야 합니다.

comingsoon={value ? 1 : undefined}

대신 숫자로만 입력해 주세요.https://github.com/styled-components/styled-components/issues/1198에서 해결 방법을 알려드리겠습니다.

이 에러는styled-components때문인 것 같다styled()DOM 내의 요소에 부울을 적용하려고 했지만 DOM 요소는 속성으로 문자열만 받아들입니다.

이것은, 에 충분히 문서화되어 있습니다.styled-components저장소: https://github.com/styled-components/styled-components/issues/1198

두 가지 솔루션이 있습니다.

1. 전달된 속성이 있는 스타일 구성 요소를 위로 들어 올려 해당 속성이 요소에 직접 적용되지 않도록 합니다.아니면...

2. 스타일 컴포넌트를 호출할 때 전달된 속성을 소품에서 필터링합니다.

이 두 가지 옵션은 모두 아래 코드에 나와 있습니다.

Code Sandbox: 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;

이 경고는 스타일 구성 요소의 속성이 HTML에 있는 이름을 가지고 있는 경우에도 발생할 수 있습니다. 예를 들어 이름이 지정된 속성일 때 이러한 문제가 있었습니다.wrap. 이름 변경 후 경고가 사라졌습니다.

부울 값 앞에 "+"를 추가합니다.

comingsoon = {+creator.comingSoon}

답변할 링크의 다음 예

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

괄호로 둘러싸서 해결.{}그boolean내가 지나던 변수props.

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

나는 이 이슈를 얻었고 또한 보여 준다.React Hydration ErrorNext.js 어플리케이션으로 이동합니다.제 경우 스타일드 컴포넌트가 커스텀 컴포넌트를 받아서 '부울' 처리가 안 되는 것 같습니다.

회피책은 다음과 같습니다.

이전:

styled(Text)<{ center?: boolean}>
// Text is my custom component

그 후:

styled.div<{ center?: boolean}>

언급URL : https://stackoverflow.com/questions/49784294/warning-received-false-for-a-non-boolean-attribute-how-do-i-pass-a-boolean-f