- 原文地址:Can you console.log in JSX?
- 原文作者:Llorenç Muntaner
- 譯文出自:掘金翻譯計劃
- 本文永久連結:github.com/xitu/gold-m…
- 譯者:EmilyQiRabbit
- 校對者:noahziheng,hanxiansen
結論:不行!
作為一名程式設計老師,我曾看到過我的學生寫出了這樣的程式碼:
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 連結。
掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群,文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域,想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。