[譯] 在 JSX 程式碼中可以加入 console.log 嗎?

Yuqi發表於2019-03-03

結論:不行!

[譯] 在 JSX 程式碼中可以加入 console.log 嗎?

作為一名程式設計老師,我曾看到過我的學生寫出了這樣的程式碼:

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 連結。


掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群,文章來源為 掘金 上的英文分享文章。內容覆蓋 AndroidiOS前端後端區塊鏈產品設計人工智慧等領域,想要檢視更多優質譯文請持續關注 掘金翻譯計劃官方微博知乎專欄

相關文章