为什么 React 只有在未定义/布尔/null 是变量时才将它们解析为字符串?

Question

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

const name = undefined;
const myFunc = () => undefined;
let template = (
<div>
{myFunc()}
{name}
{undefined}
</div>
);
ReactDOM.render(template, document.querySelector("#root"));

输出为一次： 定义

为什么常量"名称"是唯一解析为字符串的未定义值？ 这个常量和其他两个表达式有什么区别？ (与布尔值和空值相同。 请在这里查看我的代码：代码笔

Answer 1

那是因为JSX是React.createElement(component, props, ...children)
的句法糖 它将忽略这些类型(请参阅 DOCS(：

• 布尔
• 定义
• 零

我刚刚意识到这只发生在像 codepen 这样的编辑器上，因为它们在全局上下文中运行代码，window.name 将始终是一个字符串。

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

如果将变量更改为其他变量，假设它的行为name1预期。

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

顺便说一下，堆栈片段的行为相同：

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没有冲突。

Answer 2

这里的输出在你的div 之间是空的。我将这段代码放入 jsfiddle 中以演示：

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

请注意，您只能看到我添加的"Hello world"。

Answer 3

这是因为全局变量name是属性 window.name 并且始终是字符串。

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

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

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