我想把头围在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):

  • bool
  • 未定义

  • 我只是意识到,这仅在某些编辑器(如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>


    诸如codesandboxjsfiddle之类的其他编辑器会将代码包装在函数中,因此与window.name不存在冲突。

    10-07 19:42
    查看更多