你能在 JSX 中使用 console.log 嗎？

引言

做爲 React 的初學者，每每會寫出如下代碼：

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

這樣作將不會在控制檯上打印出你所指望的 todos 信息，它只會在瀏覽器中渲染出字符串 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，它是一種拓展語言。

拓展語言是指須要通過編譯後才能被瀏覽器執行的語言，好比咱們熟知的樣式預處理器：sass，採用該語言編寫的樣式文件，後綴名爲 .scss，通過 webpack 中 sass-loader 的處理，最終轉換爲瀏覽器能夠理解的 .css 文件

相同的，.jsx 最終會被編譯爲原生的 .js。舉個🌰，咱們在 JSX 寫入：

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

它將最終被編譯爲：

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
複製代碼

這一切都是 Babel（下一代 JavaScript 編譯器）在背後作的功勞，你們能夠打開 Babel/repl 親自試一試。

咱們來看 React.createElement 的每一個參數表明了什麼？

• 'h1' : 標籤的名稱，是一個字符串
• { className: 'greeting' } : 將 <h1> 的屬性轉化爲對象，例如 className，事件處理器，props
• 'Hello, world!' : 被叫作 children，包含 <h1> 標籤內的全部子內容

咱們將視線轉向文章開頭的代碼：

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

會被最終編譯爲：

// 當包含多個子元素時，children將視爲一個數組
React.createElement(
  'div',
  {}, // 沒有屬性
  [ 
    React.createElement( // 遇到新標籤h1，再次執行React.createElement
      'h1',
      {}, // 一樣沒有屬性
      'List of todos',
    ),
    'console.log(this.props.todos)'
  ]
);
複製代碼

結尾

當你想使用 console.log 時，只需將代碼嵌入到 {} 中

原文連接：Can you console.log in JSX?