[譯] 在 JSX 代碼中能夠加入 console.log 嗎？

• 原文地址：Can you console.log in JSX?
• 原文做者：Llorenç Muntaner
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：EmilyQiRabbit
• 校對者：noahziheng，hanxiansen

結論：不行！

做爲一名編程老師，我曾看到過個人學生寫出了這樣的代碼：

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>
  );
}
複製代碼

另外一個很受歡迎的方式：

在 return() 語句以前加 console.log：

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> 的屬性。它會被轉換成一個對象。對象的鍵就是屬性名，對象的鍵值就是屬性的值。

• 'Hello, world!'：它被稱爲 children。位於起始符標籤 <h1> 和結束符 </h1> 之間的內容都會被傳遞進去。

咱們如今來回顧一下文章開始的時候寫的失敗的 console.log：

<div>
  <h1>List of todos</h1>
  console.log(this.props.todos)
</div>
複製代碼

這段代碼將會被編譯爲：

// 當一個以上的元素被傳遞進去，第三個參數將會變成一個數組

React.createElement(
  'div',
  {}, // 沒有屬性
  [ 
    React.createElement(
      'h1',
      {}, // 也沒有屬性
      'List of todos',
    ),
    'console.log(this.props.todos)'
  ]
);
複製代碼

console.log 被當成一個字符串傳遞到了方法 createElement。它並無被執行。

這說得通，上面咱們也看到了標題 List of todos。計算機如何能知道，哪段代碼是須要被執行的，哪段是你但願渲染的呢？

答案：計算機認爲二者都是字符串。計算機必定會將文字做爲字符串處理。

因此，若是你但願這段代碼被執行，你須要 JSX 中代表，好讓它知道如何處理。你能夠將代碼做爲表達式放在 {} 中。

這樣就行了！如今你已經知道了在哪裏，在什麼時候，如何將 console.log 用於 JSX 代碼中了！

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。