深入 JSX

在運行時選擇類型

錯誤

import React from 'react'; import { PhotoStory, VideoStory } from './stories';const components = {photo: PhotoStory,video: VideoStory };function Story(props) {// 錯誤！JSX 標簽名不能為一個表達式。return <components[props.storyType] story={props.story} />; } 復制代碼

正確：如果你的確想通過表達式來確定 React 元素的類型，請先將其賦值給大寫開頭的變量，不能是小寫的！

import React from 'react'; import { PhotoStory, VideoStory } from './stories';const components = {photo: PhotoStory,video: VideoStory };function Story(props) {// 正確！JSX 標簽名可以為大寫開頭的變量。const SpecificStory = components[props.storyType];return <SpecificStory story={props.story} />; } 復制代碼

擴展屬性

function App1() {return <Greeting firstName="Ben" lastName="Hector" />; }function App2() {const props = {firstName: 'Ben', lastName: 'Hector'};return <Greeting {...props} />; } 復制代碼

當你構建通用容器時，擴展屬性會非常有用。然而，這樣做也可能讓很多不相關的屬性，傳遞到不需要它們的組件中使代碼變得混亂。我們建議你謹慎使用此語法。

Context

Context 設計目的是為共享那些被認為對于一個組件樹而言是“全局”的數據，例如當前認證的用戶、主題或首選語言。

Fragments

React 中一個常見模式是為一個組件返回多個元素。Fragments 可以讓你聚合一個子元素列表，并且不在DOM中增加額外節點。

class Columns extends React.Component {render() {return (<><td>Hello</td><td>World</td></>);} }<table><tr><td>Hello</td><td>World</td></tr> </table> 復制代碼

Portals

高階組件

具體而言，高階組件就是一個函數，且該函數接受一個組件作為參數，并返回一個新的組件

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的React官方文档学习笔记（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。