почему мы не можем передавать логическое значение в качестве реквизита в React, он всегда требует, чтобы строка передавалась в моем коде

Несмотря на то, что я применил проверку propType, мой редактор выдает ошибку при передаче логического значения для hasvacancy prop. Вот что я вижу:

Ошибка: "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'));

Ответы

Ответ 1

Вы должны заключить логическое значение в {}:

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

Ответ 2

Не пытайтесь передавать значения Boolean в качестве значений атрибутов. Вместо этого просто используйте их присутствие или его отсутствие как ваше логическое значение:

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

Обязательно обновите свои propTypes, чтобы сделать hasVacancy не требуемым, а также:

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