JSX | 技术维基

React 渲染屬性

學習如何使用渲染屬性來構建 React 應用程序一個常見的模式用於在組件間共享狀態是使用 children 屬性。在組件的 JSX 中，你可以渲染 {this.props.children} ，它會自動將父組件中傳遞的任何 JSX 插入為子元素： class Parent extends React.Component { constructor(props) { super(props) this.state = { /*...*/ } } render() { return <div>{this.props.children}</div> } } const Children1 = () => {} const Children2 = () => {} const App = () => ( <Parent> <Children1 /> <Children2 /> </Parent> ) 然而，這裡存在一個問題：無法從子元素中訪問父組件的狀態。為了能夠共享狀態，你需要使用一個渲染屬性組件，而不是將組件作為父組件的子元素傳遞。你需要傳遞一個函數，在 {this.props.children()} 中執行該函數。該函數可以接受參數： class Parent extends React.Component { constructor(props) { super(props) this....

React 片段

如何使用 React 片段創建不可見的 HTML 標籤請注意，我將返回值包裝在 div 中。這是因為組件只能返回一個元素，如果你想要多於一個元素，你需要用另一個容器標籤包裹它。然而，這會在輸出中引入一個不必要的 div。你可以通過使用 React.Fragment 來避免這種情況： import React, { Component, Fragment } from 'react' class BlogPostExcerpt extends Component { render() { return ( <React.Fragment> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </React.Fragment> ) } } 此外，還有一種非常簡潔的簡寫語法 <></>，它僅在最新版本（和 Babel 7+）中受到支持： import React, { Component, Fragment } from 'react' class BlogPostExcerpt extends Component { render() { return ( <> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </> ) } }

React：如何製作響應式的 JSX

我需要在 React 中，讓側邊欄在大螢幕上呈現一種樣式，而在較小螢幕上呈現另一種樣式，所以我希望能夠在 JSX 中偵測到響應式佈局的變化。就像這樣：您可以使用 react-responsive 套件來實現這一點。 npm install react-responsive 然後您可以引入 useMediaQuery 鉤子： import { useMediaQuery } from 'react-responsive' 在您的組件中，您可以像這樣使用它： const isBigScreen = useMediaQuery({ query: '(min-device-width: 1224px)' }) const isSmallScreen = useMediaQuery({ query: '(max-width: 1224px)' }) 這是我在組件主頁上找到的一個簡單的斷點示例，對於我的需求來說效果很好。我在一個佈局組件中以以下方式使用它： import { useMediaQuery } from 'react-responsive' export default function Layout({ children }) { const isBigScreen = useMediaQuery({ query: '(min-device-width: 1224px)' }) const isSmallScreen = useMediaQuery({ query: '(max-width: 1224px)' }) return ( <div> {isSmallScreen ?...

修復無法顯示的錯誤：物件無法作為 React 的子項

這個錯誤可能是因為你有一個 React 组件，並在 JSX 中渲染了一個 prop，像是這樣的，但在初始化組件參數時忘記對 prop 解構： function MyComponent(test) { return <p>{test}</p> } 你應該這樣做： function MyComponent({ test }) { return <p>{test}</p> } 這個組件接收到一個 props 物件，我們通常使用物件解構將 props “映射” 到變數上，就像我們的範例中的 {test} 那樣。

在 Astro 中構建可組合的布局

在建立網站時，我喜歡將所有的布局分散在不同的文件中。假如我想建立一個登陸頁面。我之前做的是一個純HTML的頁面。這非常好，沒有比這更簡單和更簡約的了。但是後來我意識到我還想在網站上創建另一個類似的頁面，但具有相同的樣式和結構。開始出現重複代碼的問題。然後我想要另一個頁面，最後我決定對所有頁面的標題進行更改，而這變得讓人沮喪。這就是靜態網站生成器發揮作用的時候了。在許多工具中，比如 Hugo，你可以使用 partials（局部文件）。在 Astro 中，這全部基於組件，因此我們可以導入和嵌入 JSX 中的組件： --- import Header from ../components/Header.astro import Footer from ../components/Footer.astro --- <html> <body> <Header /> <h1>A page</h1> <Footer /> </body> </html> 然後我們可以在組件中複製/粘貼這個結構。請注意，其中仍然有一些我們可以提取的 HTML 內容，以避免複製/粘貼代碼。我們使用佈局來實現這一點。您可以在 src/layouts 文件夾中創建佈局： --- import Header from ../components/Header.astro import Footer from ../components/Footer.astro --- <html> <body> <Header /> <slot /> <Footer /> </body> </html> 注意 <slot /> 的使用方式。這是我們可以在其中嵌入任何來自其他組件的內容的方法。我們可以這樣使用佈局： --- import MyLayout from '....

在 Tailwind 中無法動態生成類別

我想在 Tailwind 中使用動態顏色，使用 JSX 中的這種語法： bg-${color}-500 但它並未應用於頁面，因為 Tailwind 在程式碼中找不到類似 bg-red-500 的文字，所以該程式碼未加入最終的 CSS 中。因此，我改成在 switch 中列舉所有可能的顏色選項，然後生成類別： const getColorClass = (color) => { switch (color) { case 'green': return 'text-green-500' case 'blue': return 'text-blue-500' case 'red': return 'text-red-500' default: return '' } } 並在類別中使用此函數： <h1 className={`mt-10 ${getColorClass(color)}`}> ... 一個「快速」的方法是將可能需要的類別寫在註解中，像這樣： /* possible Grid values are grid-cols-1 grid-cols-2 grid-cols-3 */ <div className={`grid grid-cols-${data[0].length}`}>

在React中的條件渲染

如何在React中動態輸出某些元素或其他元素在React的元件JSX中，您可以基於條件進行動態決定要輸出的元件或其他元素，或者只是其中一部分的JSX。最常見的方式可能是使用三元運算符： const Pet = (props) => { return ( {props.isDog ? <Dog /> : <Cat />} ) } 另一種方式是使用&&運算符，當您概念上只有if而無else時，這種方式很好用。它的運作方式是：如果它之前的表達式求值為true，則打印之後的表達式： const Pet = (props) => { return ( {props.isDog && <Dog />} {props.isCat && <Cat />} ) }

如何在JSX中返回多個元素

如何解決 JSX 在組件中返回多個元素的限制在編寫 React 中的 JSX 時，有一個重要注意事項：你必須返回一個父元素，而不是多個元素。例如，這樣是不可能的： const Pets = () => { return ( <Dog /> <Cat /> ) } 解決這個問題的一種傳統方式是將組件和其他 HTML 元素包裹在一個 <div> 中： const Pets = () => { return ( <div> <Dog /> <Cat /> </div> ) } 然而，這引入了一個問題 - 我們只是為了使 JSX 工作而引入了一個不必要的 HTML 元素，但在最終的 HTML 中並不需要。另一種解決方案是返回一個 JSX 元素的數組： const Pets = () => { return [ <Dog />, <Cat /> ] } 還有一種解決方案是使用 Fragment，這是一個相對較新的 React 功能，為我們解決了這個問題：...

如何在JSX中重複顯示一些內容

最近我遇到了在 JSX 中需要重複顯示內容的情況。具體用例是這樣的：我有一個評級從1到5的範圍，根據評級的值我想顯示相應數量的星星，從1顆到5顆。於是我使用了下面這段代碼： <p> {[...Array(rating)].map(() => '⭐️ ')} </p> 請注意，我在這裡使用了 JavaScript 的展開運算符 ... 來生成一個指定長度的數組。然後我使用 map 方法將內容設置為星星符號 '⭐️ '。這樣，根據評級的數值，即可重複顯示相應數量的星星。希望對你有所幫助！

開始使用JSX

JSX是React引入的一個技術。讓我們深入了解一下。 JSX簡介 JSX入門轉譯JSX JS in JSX 在JSX中使用HTML 您需要關閉所有標籤駱駝命名法是新的標準 class變成className style屬性改變其語義表單 React中的CSS 為什麼這比純CSS / SASS / LESS更受青睞？這是首選解決方案嗎？ JSX中的表單 value屬性和defaultValue屬性更一致的onChange事件 JSX自動轉義 JSX中的空格水平空格被修剪為1個垂直空格被消除在JSX中添加註釋擴展屬性如何在JSX中進行循環 JSX簡介 JSX是由React引入的一項技術。儘管React在不使用JSX的情況下也可以正常工作，但它是與組件一起工作的理想技術，因此React從JSX中獲益良多。起初，您可能會認為使用JSX就像混合HTML和JavaScript（以及CSS）。但事實並非如此，因為使用JSX語法時，實際上是用JavaScript編寫一個組件UI的聲明語法。您使用的不是字符串描述UI，而是使用JavaScript，這使您能夠做許多好事。 JSX入門以下是如何定義包含字符串的h1標籤的示例： const element = <h1>Hello, world!</h1> 它看起來像JavaScript和HTML的奇怪混合，但實際上它是完全的JavaScript。看起來像HTML，實際上是為了定義組件以及它們在標記中的定位而添加的語法糖。在JSX表達式中，可以非常容易地插入屬性： const myId = 'test' const element = <h1 id={myId}>Hello, world!</h1> 只需注意，當屬性具有連字符（-）時，它會轉換為駝峰命名法。還有兩種特殊情況： class變成className for變成htmlFor 這是因為它們是JavaScript中的保留字。以下是一個將兩個組件包裝到div標籤中的JSX片段的示例： <div> <BlogPostsList /> <Sidebar /> </div> 標籤始終需要關閉，因為這更像是XML而不是HTML（如果您還記得XHTML的日子，這將是熟悉的，但此後採用了HTML5鬆散語法）。在這種情況下，使用了自閉標籤。請注意，我將2個組件包裝到div中。為什麼？因為**render()函數只能返回單個節點**，所以如果您要返回2個兄弟節點，只需添加一個父節點。它可以是任何標籤，不僅僅是div。轉譯JSX 瀏覽器無法執行包含JSX代碼的JavaScript文件。它們必須首先轉換為常規JS。...