web-dev-qa-db-fra.com

pourquoi nous ne pouvons pas passer la valeur booléenne comme accessoires dans React, il faut toujours que chaîne soit passée dans mon code

Même si j'ai appliqué la validation propType, mon éditeur génère une erreur lorsque la valeur booléenne est transmise pour la variable hasvacancy prop. Voici ce que je vois:

Erreur: 'SyntaxError: la valeur JSX doit être une expression ou un texte JSX cité'

Je sais que je transmets une valeur de type de chaîne pour 'hasvacancy' prop, mais que dois-je faire pour pouvoir transmettre un booléen ou d'autres types de données via le 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'));
reactjsredux
50
Vishnu Shekhawat

Vous devez inclure la valeur booléenne dans {}:

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

N'essayez pas de transmettre des valeurs booléennes en tant que valeurs d'attribut. À la place, utilisez simplement leur présence ou leur absence comme valeur booléenne:

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

Assurez-vous de mettre à jour vos propriétés pour rendre hasVacancy non requis, ainsi:

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

A ceux d'entre vous qui ont reçu l'avertissement

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

Cela se produit si vous transmettez les accessoires sans prendre les valeurs booléennes de ceux-ci.

Par exemple.:

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

Ceci peut être contourné par

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