在 React 中打印布尔值的状态值不会由字符串插值打印答案

【问题标题】：在 React 中打印布尔值的状态值不会由字符串插值打印
【发布时间】：2022-01-23 15:25:18
【问题描述】：

import React, { Component } from 'react';

class ButtonStatus1 extends Component {

  constructor(props){
    super(props);
    this.state = {
      a: "false",
      b: false
    }
  }

  render(){
    return (
      <div>
        <h1>a: {this.state.a}, b: {this.state.b}</h1>
      </div>
    );
  }
}

export default ButtonStatus1;

输出：

预期：

假的，假的

据我所知，字符串插值将始终以字符串的形式输出，无论输入是什么。因此，在这种情况下，即使 this.state.b 是布尔值 - false，也应该打印输出。如果该值存在 - 只是因为它是布尔值，为什么不打印它。这不奇怪吗？？

【问题讨论】：

stackoverflow.com/questions/38337262/… 可能重复？我认为 React 不会将值强制转换为字符串。这里并不是严格意义上的字符串插值，而是 React 在 {} 内部执行一个表达式。
您是否尝试过添加 .toString() 方法？应该使用 this.state.a.toString() 正确打印值。

标签： javascript reactjs react-native react-hooks

【解决方案1】：

{} 不只是字符串插值

这是一种 JSX 语法，用于通知其中的表达式需要被计算

但是有一些特定的值不会被渲染，比如

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

布尔值通常用于条件渲染，例如

{array.length > 0 && array.map(...)}

如果array.length > 0 是false，渲染false 是不可取的

React docs

顺便说一句，如果你想渲染布尔值，你可以将它们转换为字符串 (false.toString())

【讨论】：

【解决方案2】：

JSX 在{} 内部执行一个表达式，它不是字符串插值。

如果 React DID 打印 booleans/nulls/undefined，这意味着你不能做这样的短路：

isTrue() && <p>hello world</p>

如果isTrue() 等于false，它不会渲染任何内容，而是始终在DOM 中渲染false。这会使条件渲染变得更加麻烦。

【讨论】：

【解决方案3】：

进入 React 世界 return false 与 return null 具有相同的结果。所以字符串插值是一个简单的函数，它不仅返回字符串。它可以是任何呈现的 JSX 组件。这就是为什么 false 呈现为空值的原因。你应该使用

String(this.state.b);

【讨论】：