为什么我们不能传递布尔值作为道具在反应，它总是要求字符串传递在我的代码

即使我已经应用了 protype 验证，我的编辑器在为 hasvacancy道具传递布尔值时仍会抛出一个错误。以下是我所看到的:

错误: ‘ SyntaxError: JSX 值应该是一个表达式或引用的 JSX 文本’

我知道我正在传递一个字符串类型的值作为“ hasvoid”道具，但是我需要做什么才能通过道具传递一个布尔值或其他数据类型。

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'));
117216 次浏览
小开
最佳答案

您应该将布尔值包含在{}中:

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

我正在更新这个答案，因为我的原始答案(省略了值)不再被认为是最佳实践。现在，只需将您的值包装在大括号中，就像您包装其他任何组件属性值一样。所以，取而代之的是:

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

这样做:

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

如果您使用前面的语法，请确保更新您的 protype，使 hasVacancy 不再是必需的; 否则，您可以使用 isRequired对其进行限制:

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

那些收到警告的人

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 } />

提交答案