Question

我正在努力把自己的头围在JSX上。我发现了一个非常奇怪的行为。这是我的代码：

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

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

输出为一次：未定义

为什么const“名称”是唯一解析为字符串的未定义值？此const与其他两个表达式有什么区别？（与Boolean和null相同。）请在此处查看我的代码：codepen

Answer 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>
);

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

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)

使用其他全局变量名称，它应该可以正常工作。但是您通常不应该在模板中使用全局常量。

为什么React仅在它们是变量时才将undefined / boolean / null解析为字符串？

3 个答案: