为什么React只在它们是变量时将undefined/boolean/null解析为string？

Question

我正试着把头围绕在JSX上.我发现了一个非常奇怪的行为.这是我的代码:

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

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

输出是一次:undefined

为什么const"name"是唯一解析为字符串的未定义值？这个const和其他两个表达式有什么区别？(与Boolean和null相同.)请在此处查看我的代码:codepen

Answer 1

那是因为JSX它的语法糖 会忽略这些类型(参见DOCS): React.createElement(component, props, ...children)

• 布尔
• 未定义
• 空值

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

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

如果您将变量更改为其他内容,请假设name1它的行为符合预期.

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

顺便说一下,stack-snippets表现相同:

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.