为什么我们不能在React中将布尔值作为道具传递，它总是需要在我的代码中传递字符串
为什么我们不能在React中将布尔值作为道具传递，它总是需要在我的代码中传递字符串
提问于 2016-09-05 16:10:04
即使我已经应用了propType验证，我的编辑器在为hasvacancy属性传递布尔值时仍然抛出一个错误。这是我所看到的：
错误：'SyntaxError: jsx值应该是表达式或带引号的JSX文本‘
我知道我传递的是一个字符串类型值，但是我需要做什么才能通过这个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'));回答 3
Stack Overflow用户
回答已采纳
发布于 2016-09-05 16:21:13
您应该将布尔值包含在{}中：
render(<VacancySign hasvacancy={false}/> , document.getElementById('root'));Stack Overflow用户
发布于 2017-05-02 23:55:51
我正在更新这个答案，因为我的原始答案(省略了值)不再被认为是最佳实践。现在，只需将您的值括在大括号中，就像处理任何其他组件属性值一样。因此，不是这样(它仍然有效)：
render(<VacancySign hasVacancy />, document.getElementById('root'));执行以下操作：
render(<VacancySign hasVacancy={true} />, document.getElementById('root'));如果您使用的是前一种语法，请确保更新propTypes以使hasVacancy不再是必需的；否则，您可以使用isRequired对其进行限制
VacancySign.propTypes ={
hasVacancy: React.PropTypes.bool.isRequired
}Stack Overflow用户
发布于 2019-02-24 06:18:42
对于那些收到警告的人
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 } />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39326300
复制相关文章
相似问题