为什么我们不能在响应中将布尔值作为prop传递，它总是要求在我的代码中传递字符串

reactjs React.js

蛋蛋

2020-03-30

即使我已应用propType验证，但在传递hasvacancyprop的布尔值时，我的编辑器也会引发错误。这是我所看到的：

错误：“ 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'));

第3855篇《为什么我们不能在响应中将布尔值作为prop传递，它总是要求在我的代码中传递字符串》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
飞云 2020.03.30

对于那些收到警告的人 

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android