[譯]你能夠在JSX中使用console.log嗎?

原文連接: Can you console.log in JSX?
原文做者: Llorenç Muntaner
譯者: 進擊的大蔥
推薦理由: 不少React初學者不知如何在React的JSX中使用console.log進行調試,本文將會介紹幾個在JSX中使用console.log的方法。javascript

做爲一個編程老師,我常常看到學生寫如下代碼進行調試:java

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

但是上面的代碼並不能夠獲得他們想要的結果,瀏覽器會把這段代碼 console.log(this.props.todos) 當作純文本在界面展現出來 。react

先不急着解釋這個爲何不行的緣由,讓咱們先看幾個在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>組件bash

const ConsoleLog = ({ children }) => {
  console.log(children);
  return false;
};
複製代碼

而後在須要的地方使用這個組件:babel

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進行調試了!

關注個人公衆號,獲取我分享的最新技術推送!

相關文章
相關標籤/搜索