为啥 React 只有当它们是变量时才将 undefined/boolean/null 解析为字符串？

Posted 2023-02-21

【中文标题】为啥 React 只有当它们是变量时才将 undefined/boolean/null 解析为字符串？

【英文标题】：Why does React resolve undefined/boolean/null to string only when they are variables?为什么 React 只有当它们是变量时才将 undefined/boolean/null 解析为字符串？

【发布时间】：2019-03-25 00:58:57

【问题描述】：

我正在尝试围绕 JSX 进行思考。 我发现了一个非常奇怪的行为。 这是我的代码：

const name = undefined;
const myFunc = () => undefined;
let template = (
  <div>
    myFunc()
    name
    undefined
  </div>
);

ReactDOM.render(template, document.querySelector("#root"));

输出是一次： 未定义

为什么 const "name" 是唯一解析为字符串的未定义值？ 这个 const 和其他两个表达式有什么区别？ （与布尔值和空值相同。） 请在此处查看我的代码：codepen

【问题讨论】：

技术上不应该显示任何内容，因为所有虚假值都应该被忽略。似乎其中一个值以某种方式被字符串化了。

无法在 JsFiddle 中重现，你使用什么 React 版本？

【参考方案1】：

这是因为JSX 是React.createElement(component, props, ...children) 的语法糖 它将忽略这些类型（参见DOCS）：

布尔值 未定义 空

我刚刚意识到这只发生在像 codepen 这样的一些编辑器上，因为它们在全局上下文和window.name will always be a string 中运行代码。

window.name 将通过以下方式将所有值转换为其字符串表示形式 使用 toString 方法。

如果您将变量更改为其他内容，假设name1 它的行为与预期相同。

const name1 = undefined;
const myFunc = function()return undefined;
let template = (
  <div>
    name1
    undefined
    myFunc()
  </div>
);

顺便说一下，stack-sn-ps 的行为是一样的：

console.log('name is ', name);
const name = undefined;
console.log('and now name is ', name);
const name1 = undefined;
const myFunc = function()return undefined;
let template = (
  <div>
    name
    name1
    undefined
    myFunc()
  </div>
);

ReactDOM.render(template, document.querySelector("#root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

codesandbox 或jsfiddle 等其他编辑器会将代码包装在一个函数中，因此与window.name 没有冲突。

【参考方案2】：

这是因为全局变量name 是属性window.name 并且永远是一个字符串。

window.name 将使用 toString 方法将所有值转换为其字符串表示形式。

name = undefined
foo = undefined
console.log('`name` is a', typeof name, ', but `foo` is a', typeof foo)

使用不同的全局变量名，它应该可以按预期工作。但是你通常不应该在你的模板中使用全局常量。

【参考方案3】：

这里的输出在你的 div 之间是空的。我把这段代码放到jsfiddle来演示：

const name = undefined;
const myFunc = () => undefined;
let template = (
  <div>
    myFunc()
    name
    undefined
    Hello world
  </div>
);

请注意，您所看到的只是我添加的“Hello world”。