在 React with TypeScript 中，您可以使用條件渲染來根據條件選擇要渲染的內容。當根據特定標準顯示不同的內容或元件時，這非常有用。有幾種不同的方法可以使用 TypeScript 在 React 中實現條件渲染。一種方法是使用條件運算子（也稱為三元運算子）。此運算子接受一個條件，如果條件為 true，則傳回一個值；如果條件為 false，則傳回另一個值。
您也可以使用 && 運算子根據條件有條件地渲染元件。如果該運算子左側的值為 true，則該運算子的計算結果為 true；如果其左側的值為 false，則該運算子的計算結果為 false。
實現條件渲染的另一種方法是使用 switch 語句，它允許您針對多種情況測試一個值，並根據與該值相符的情況執行不同的程式碼區塊。
一般來說，在實作條件渲染時，最好使用最直接的方法來滿足您的需求。這可以使程式碼更易於閱讀和理解。
條件屬性
在 React 中，屬性將資料從父元件傳遞到子元件。條件屬性僅在特定條件下設定在組件上。
透過將 TypeScript 與 React 結合使用，您可以對程式碼進行類型檢查，並為元件期望接收的屬性提供類型定義。這可以幫助捕獲錯誤並使您的程式碼更易於理解和維護。
要使用 TypeScript 在 React 元件中建立條件屬性，您可以使用「if」語句或三元運算子根據條件設定屬性的值。例如，您可能有一個需要「顏色」屬性的元件，但您只想在滿足特定條件時設定「顏色」屬性。在這種情況下，您可以使用條件語句僅在滿足條件時設定 'color' 屬性。
範例步驟
npx create-react-app my-app --template typescript
登入後複製
在 React 專案的 src 資料夾中建立一個名為「MyComponent」的新元件，名稱為「MyComponent.tsx」。
然後我們需要定義 Props 介面以在 React 中使用 TypeScript 資料約定。
我們可以使用三元運算子或 && 運算子有條件地顯示傳遞的屬性。
從「App.tsx」中，我們導入 MyComponent 並多次使用它。我們在不同的屬性值下使用該元件並在網頁上檢查結果。
範例
在這個範例中，我們使用 React 和 TypeScript 展示了條件屬性。我們透過 props 取得 MyComponent 中的屬性值。我們採用兩個屬性，「userId」和「username」。從邏輯上講，如果 useId 不等於 0，我們會嘗試使用三元運算子在網頁上顯示 userId，並且僅當使用者名稱不是空字串時才使用 && 運算子顯示使用者名稱。
App.tsx
#
import React from 'react'
import MyComponent from './MyComponent'
export const App: React.FC = () => {
return (
<div style={{ padding: '10px' }}>
<h2> Conditional Properties Using React with TypeScript </h2>
<div>
<h4> userId: 123 username: 'ABC' </h4>
<MyComponent userId={123} username="ABC" />
<h4> userId: 456 username: '' </h4>
<MyComponent userId={456} username="" />
<h4> userId: 0 username: 'XYZ' </h4>
<MyComponent userId={0} username="XYZ" />
<h4> userId: 0 username: '' </h4>
<MyComponent userId={0} username="" />
</div>
</div>
)
}
export default App
登入後複製
MyComponent.tsx
import React from 'react'
type Props = {
userId: number
username: string
}
const MyComponent: React.FC<Props> = ({ userId, username }) => {
return (
<div style={{ border: '1px solid black', padding: '5px' }}>
{userId !== 0 ? <p>User ID: {userId}</p> : <p>User ID Not Defined!</p>}
{username !== '' && <p>User ID: {username}</p>}
</div>
)
}
export default MyComponent
登入後複製
輸出
範例
在此範例中，我們將更有效、更互動地看到條件屬性。我們將接受使用者輸入以在網頁上顯示訊息和資料。我們採用三個屬性：「showMessgae」、「showAlert」和「count」。從邏輯上講，我們將使用使用者觸發的事件在 MyComponent 中動態傳遞這些屬性。在 App.tsx 中，我們有四個按鈕「顯示訊息」、「顯示警報」、「增加計數」和「減少計數」。我們在 App.tsx 中還有一些狀態用於顯示訊息、警報和儲存計數器值。從邏輯上講，我們正在切換狀態以更改 MyComponent 中的屬性。
App.tsx
#
import React, { useState } from 'react'
import MyComponent from './MyComponent'
export const App: React.FC = () => {
const [showMessage, setShowMessage] = useState<Boolean>(false)
const [showAlert, setShowAlert] = useState<Boolean>(false)
const [count, setCount] = useState<number>(0)
return (
<div style={{ padding: '10px' }}>
<h2> Conditional Properties Using React with TypeScript </h2>
<p>
<button onClick={() => setShowMessage(!showMessage)}>Show Message</button>
<button onClick={() => setShowAlert(!showAlert)}> Show Alert </button>
<button onClick={() => setCount(count + 1)}> Increase Count </button>
<button onClick={() => setCount(count + 1)}> Decrease Count </button>
</p>
<MyComponent
showMessage={showMessage}
showAlert={showAlert}
count={count}
/>
</div>
)
}
export default App
登入後複製
MyComponent.tsx
import React from 'react'
type Props = {
showMessage: Boolean
showAlert: Boolean
count: number
}
const MyComponent: React.FC<Props> = ({ showMessage, showAlert, count }) => {
return (
<div style={{ padding: '5px' }}>
{showMessage && (
<p style={{ backgroundColor: '#afe7af', padding: '10px' }}>
Good Morning!
</p>
)}
{showAlert && (
<p style={{ backgroundColor: '#ffbaba', padding: '10px' }}>
This is alert message!
</p>
)}
<h4>Count: {count}</h4>
</div>
)
}
export default MyComponent
登入後複製
輸出
點擊「顯示訊息」按鈕
點選「顯示警報」按鈕
點選「增加計數」按鈕
點選「減少計數」按鈕
使用 React 和 TypeScript 的條件屬性是建立任何 Web 應用程式的非常強大的互動式方式。對於現代 Web 開發來說，這是必要的。
以上是將 React 與 TypeScript 結合使用的條件屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！
