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

Question

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

Ошибка: "SyntaxError: значение JSX должно быть выражением или заключенным в кавычки текстом JSX"

Я знаю, что передаю значение строкового типа для опоры hasvacancy, но что мне нужно сделать, чтобы я мог передавать логические или другие типы данных через опору.

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

reactjs redux

67

Vishnu Shekhawat 5 Сен 2016 в 11:10

Answer 1

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

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

116

Jan Franz Palngipang 5 Сен 2016 в 08:21

Answer 2

Я обновляю этот ответ, так как мой исходный ответ (без значения) больше не считается лучшей практикой. Теперь просто заключите свое значение в фигурные скобки, как и любое другое значение атрибута Component. Итак, вместо этого (это все еще работает):

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

Сделай это:

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

Если вы используете прежний синтаксис, обязательно обновите свой propTypes, чтобы hasVacancy не требовался; в противном случае вы можете ограничить его с помощью isRequired:

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

44

Artif3x 6 Апр 2020 в 14:36

Answer 3

Тем из вас, кто получил предупреждение

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

Это происходит, если вы передаете реквизиты вниз, не извлекая из них логические значения.

Например.:

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

Это можно обойти с помощью

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

5

Arwed Mett 23 Фев 2019 в 22:18

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

3 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

reactjs