原文連接: 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進行調試了!
關注個人公衆號,獲取我分享的最新技術推送!