[译]你能够在JSX中使用console.log吗？

原文连接: Can you console.log in JSX?
原文做者: Llorenç Muntaner
译者: 进击的大葱
推荐理由: 不少React初学者不知如何在React的JSX中使用console.log进行调试，本文将会介绍几个在JSX中使用console.log的方法。

做为一个编程老师，我常常看到学生写如下代码进行调试：

render() {
    return {
        <div>
            <h1>List of todos</h1>
            console.log(this.props.todos)
        </div>
    }
}
复制代码

但是上面的代码并不能够获得他们想要的结果，浏览器会把这段代码 console.log(this.props.todos) 当作纯文本在界面展现出来 。

先不急着解释这个为何不行的缘由，让咱们先看几个在JSX中正确使用console.log的方法。

最经常使用的解决方法

JSX中嵌入JS表达式:

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>
  );
}
复制代码

这个方法有用的缘由是, 布尔值false不会被渲染出来。

为何第一个方法不能够呢？

咱们必需要记住JSX既不是原生的JavaScript语法，也不是HTML语法。它只是一个语法扩展。你写的JSX都会被诸如babel-plugin-transform-react-jsx的工具转换为原生JS代码。

举个例子，假如咱们写了如下JSX的代码:

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

通过编译工具的转换后，它将会变成如下这个样子:

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
复制代码

咱们再看一下React.createElement这个方法接收的参数分别是什么:

• h1: 第一个参数是你要渲染的HTML元素的名称, 它是一个字符串。
• {className: 'greeting'}: 第二个参数是一个对象， 这个对象是你传入h1这个元素的属性。这个对象的key是属性的名称，key对应的值是你在JSX中为这个key赋予的值。
• Hello, world!: 第三个参数是h1这个元素的子元素children。它的值是包在开始标签<h1>和关闭标签</h1>之间的全部内容。

明白React.createElement这个函数各个参数的意义后，咱们再回头看一下文章一开始介绍的那种直接在JSX里面写console.log的办法为何没有用的缘由:

<div>
  <h1>List of todos</h1>
  console.log(this.props.todos)
</div>
复制代码

以上的代码编译成原生JS后会变成:

// 若是一个标签内的子元素超过一个，它们会被整合成一个数组传入函数
React.createElement(
  'div',
  {}, // 外面没有传入参数
  [ 
    React.createElement(
      'h1',
      {}, // 这里也没有参数
      'List of todos',
    ),
    'console.log(this.props.todos)'
  ]
);
复制代码

由上可知，console.log(this.props.todos)这个代码被当成了字符串传入了React.createElement中。这就是为何这段代码没有被执行的缘由。

若是你但愿你的代码被执行，你须要使用{}告诉JSX你输入的字符串是能够被执行的代码，也就是:

<div>
  <h1>List of todos</h1>
  { console.log(this.props.todos) }
</div>
复制代码

看完这边文章，我想你应该知道如何在JSX中使用console.log进行调试了！

关注个人公众号，获取我分享的最新技术推送！