React에서 부울 값을 props로 전달할 수없는 이유는 항상 내 코드에 문자열을 전달해야합니다.

React에서 부울 값을 props로 전달할 수없는 이유는 항상 내 코드에 문자열을 전달해야합니다.

---

propType 유효성 검사를 적용 했음에도 불구하고 내 편집기에서 hasvacancyprop에 대한 부울 값을 전달할 때 오류가 발생합니다 . 내가보고있는 것은 다음과 같습니다.

오류 : 'SyntaxError : JSX 값은 표현식이거나 인용 된 JSX 텍스트 여야합니다.'

나는 'hasvacancy'prop에 대한 문자열 유형 값을 전달하고 있음을 알고 있지만 prop을 통해 부울 또는 기타 데이터 유형을 전달할 수 있도록 어떻게해야합니까?

import React from 'react';
import { render } from 'react-dom';


class VacancySign extends React.Component{

  render() {
    console.log('------------hasvacancy------', this.props.hasvacancy);
    if(this.props.hasvacancy) {
      return(
        <div>
          <p>Vacancy</p>
        </div>
      );
    } else {
      return(
        <div>
          <p>No-Vacancy</p>
        </div>);
    }

  }
}

VacancySign.propTypes ={
  hasvacancy: React.PropTypes.bool.isRequired
}

render(<VacancySign hasvacancy='false'/> , 
document.getElementById('root'));

---

부울 값을 {}로 묶어야합니다.

render(<VacancySign hasvacancy={false}/> , document.getElementById('root'));

---

부울 값을 속성 값으로 전달하려고하지 마십시오. 대신 부울 값으로 존재 여부를 사용하십시오.

render(<VacancySign hasVacancy />, document.getElementById('root'));

hasVacancy가 필요하지 않도록 propTypes를 업데이트해야합니다.

VacancySign.propTypes ={
    hasVacancy: React.PropTypes.bool
}

---

경고를받은 분들께

warning.js?6327:33 Warning: Received `true` for a non-boolean attribute `editable`

이는 props에서 부울 값을 가져 오지 않고 props를 전달하면 발생합니다.

예 :

const X = props => props.editable ? <input { ...props } /> : <div { ...props } />

이것은 다음으로 우회 할 수 있습니다.

const X = ({ editable, ...props }) => editable ? <input { ...props } /> : <div { ...props } />

참조 URL : https://stackoverflow.com/questions/39326300/why-we-cannot-pass-boolean-value-as-props-in-react-it-always-demands-string-to