具有布尔属性的ReactJS三元运算符

问题描述

我正在尝试将三元运算符与布尔属性一起使用

app.js如下：

import React from 'react';
import  HouseFull  from './HouseFull';

function App() {
  return (
    <div>
    <h1> Hello2 </h1>
    <HouseFull hasopening="{false}" />


    </div>
    
  );
}

反应成分如下

import React,{ Component } from 'react';

class HouseFull extends Component {

    render() {
        return (
            <div>
                 
                <h1> {this.props.hasopening} </h1>
                <h1> {this.props.hasopening ? "Available" : "No Vacancy"} </h1>
                
            </div>
        )

    }

}

export default HouseFull;

如果我将hasopening传递为true或false，则第二个h1标记的结果相同如果我通过，则显示以下内容

{true}
available

如果我通过错误，则会显示以下内容

{false}
available

我怀疑三元运算符的语句中有问题，但无法弄清楚。布尔标志的值正确反映在outpur的第一个h1标签中

解决方法

您正在传递字符串作为中的道具。您需要传递布尔值。

<HouseFull hasOpening={false} />

否则，您将必须以以下方式签入HouseFull组件，

 <h1> {this.props.hasOpening === "{false}" ? "Available" : "No Vacancy"} </h1>

三元运算符很好，但是您传递的是 string 而不是 boolean 。非空字符串将始终取值为 true ，这就是为什么在切换时什么也没发生。

List<String> greetings = completableFuture.get();

reactjs reactjs ternary