原文連結: Can you console.log in JSX?
原文作者: Llorenç Muntaner
譯者: 進擊的大蔥
推薦理由: 很多React初學者不知如何在React的JSX中使用console.log進行除錯，本文將會介紹幾個在JSX中使用console.log的方法。
作為一個程式設計老師，我經常看到學生寫以下程式碼進行除錯：
render() {
return {
<div>
<h1>List of todos</h1>
console.log(this.props.todos)
</div>
}
}
複製程式碼可是上面的程式碼並不可以得到他們想要的結果，瀏覽器會把這段程式碼 console.log(this.props.todos) 當做純文字在介面展示出來 。
先不急著解釋這個為什麼不行的原因，讓我們先看幾個在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>元件
const ConsoleLog = ({ children }) => {
console.log(children);
return false;
};
複製程式碼然後在需要的地方使用這個元件:
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進行除錯了！
關注我的公眾號，獲取我分享的最新技術推送！