[譯]你會在 JSX 裡 console.log 嗎

這是一篇給 react 新手的文章，老鳥就略過吧 ✈️

• 作者：Llorenç Muntaner
• 原文：https://medium.com/javascript-in-plain-english/can-you-console-log-in-jsx-732f2ad46fe1

作為一名程式設計教師，我見過許多學生嘗試這樣做：

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 方法了！