dlaczego nie możemy przekazać wartości boolowskiej jako rekwizytów w React, zawsze wymaga podania ciągu znaków w moim kodzie

Question

Mimo że zastosowałem walidację typu propType, mój edytor zgłasza błąd podczas przekazywania wartości boolowskiej dla podpory hasvacancy. Oto, co widzę:

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

wiem, że przekazując wartość typu string dla „hasvacancy” prop ale to, co muszę zrobić, więc mogę przekazać wartość logiczną lub inne typy danych poprzez podpory.

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

Answer 1

należy ująć wartość logiczną w {}:

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

Answer 2

Nie staraj się przekazać wartości logiczne jako wartości atrybutów. Zamiast tego, po prostu użyć ich obecność lub brak go jako wartość logiczną:

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

Upewnij się zaktualizować propTypes aby hasVacancy nie wymaga również:

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