why we cannot pass boolean value as props in React

问题:

Even though I have applied propType validation, my editor throws an error on when passing boolean value for the hasvacancy prop. Here is what I'm seeing:

Error: 'SyntaxError: JSX value should be either an expression or a quoted JSX text'

I know I am passing a string type value for 'hasvacancy' prop but what do I need to do so I can pass a boolean or other data types via the 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'));

回答1:

You should enclose the boolean value in {}:

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

回答2:

Don't try to pass Boolean values as attribute values. Instead, just use their presence or lack of it as your Boolean value:

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

Make sure to update your propTypes to make hasVacancy not required, also:

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

回答3:

To those of you who received the warning

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

This happens if you pass the props down without taking the boolean values out of the props.

E.g.:

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

This can be circumvented by

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