我想把头围在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
最佳答案
那是因为JSX
是 React.createElement(component, props, ...children)
的语法糖
它将忽略这些类型(请参阅DOCS):
我只是意识到,这仅在某些编辑器(如codepen)上发生,因为它们在全局上下文和window.name will always be a string中运行代码。
如果将变量更改为其他变量,可以说
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
不存在冲突。