你会在 JSX 里 console.log 吗?

更新日期: 2019-03-12阅读: 1.6k标签:  jsx

作为一名编程教师,我见过许多学生尝试这样做:

render() {
  return (
    <div>
      <h1>List of todos</h1>
      console.log(this.props.todos)
    </div>
  );
}

这不会在控制台中打印预期的列表。它只会在浏览器中渲染一个字符串 console.log(this.props.todos)。

我们先来看看一些非常简单的解决方案,然后我们将解释原因。


最常用的解决方案:

在JSX中嵌入表达式:

render() {
  return (
    <div>
      <h1>List of todos</h1>
      { console.log(this.props.todos) }
    </div>
  );
}


另一种流行的解决方案:

把 console.log 放在 return() 前面

render() {
  console.log(this.props.todos);
  return (
    <div>
      <h1>List of todos</h1>
    </div>
  );
}


一种奇特的解决方案:

直接写一个 <ConsoleLog> 组件

const ConsoleLog = ({ children }) => {
  console.log(children);
  return false;
};

使用方法:

render() {
  return (
    <div>
      <h1>List of todos</h1>
      <ConsoleLog>{ this.props.todos }</ConsoleLog>
    </div>
  );
}


为什么要这样做?

我们需要记住 JSX 并不是普通的 JavaScript,也不是 html,而是一种语法扩展。

最终 JSX 会被编译成普通的 JavaScript

比方说,我们写一段如下 JSX 代码

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

他会被编译成下面这样:

const element = react.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

我们先来回顾一下 React.createElement 的几个参数:

  • h1: 这个是一个字符串代表的是标签名
  • { className: 'greeting' } 这是标签 h1 使用的 props 这将会被转换为对象。对象的键就是 prop 的名称,值就是该属性的值
  • Hello, world! 则是 children,字符串将被插入进 <h1> 和 </h1> 之间

现在让我们回顾一下我们在本文开头尝试编写的失败的 console.log:

<div>
  <h1>List of todos</h1>
  console.log(this.props.todos)
</div>

将被编译成:

// when more than 1 thing is passed in, it is converted to an array
React.createElement(
  'div',
  {}, // no props are passed/
  [ 
    React.createElement(
      'h1',
      {}, // no props here either
      'List of todos',
    ),
    'console.log(this.props.todos)'
  ]
);

我们看到 console.log 被认为是一个字符串,插入到 createElement 方法中去。这段代码并没有被执行

这是有道理的,看我们代码上头有个 h1 标签,代表着 title。那么计算机是如何知道哪些字符串需要被执行,哪些是需要被直接渲染的呢?

答案是:它认为两者都是一个字符串。在任何时候,它始终将文本视为字符串。

因此,如果您希望执行该操作,则需要指定JSX来执行此操作。通过将其作为表达式嵌入 {} 。

就是这样,好了现在你知道应该在什么地方、什么时候以及如何去在 JSX 中调用 console.log 方法了!

作者:Llorenç Muntaner
原文:https://medium.com/javascript...


链接: https://fly63.com/article/detial/2326

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!