使用 React 和 TypeScript 實現條件屬性

在 React 和 TypeScript 中，您可以使用條件渲染根據條件選擇要渲染的內容。當根據特定條件顯示不同的內容或元件時，這很有用。在 React 和 TypeScript 中實現條件渲染有幾種不同的方法。一種方法是使用條件運算子（也稱為三元運算子）。此運算符采用一個條件，如果條件為真則返回一個值，如果條件為假則返回另一個值。

您還可以使用&&運算子根據條件有條件地渲染元件。如果其左側的值為真，則此運算子評估為真；如果其左側的值為假，則評估為假。

另一種實現條件渲染的方法是使用 switch 語句，它允許您將值與多個 case 進行比較，並根據與值匹配的 case 執行不同的程式碼塊。

通常，在實現條件渲染時，最好使用最簡單的方法來滿足您的需求。這可以使程式碼更易於閱讀和理解。

條件屬性

在 React 中，屬性將資料從父元件傳遞到子元件。條件屬性僅在某些條件下才設定在元件上。

使用 TypeScript 與 React 允許您對程式碼進行型別檢查，併為元件期望接收的屬性提供型別定義。這可以幫助捕獲錯誤，並使您的程式碼更易於理解和維護。

要在使用 TypeScript 的 React 元件中建立條件屬性，您可以使用“if”語句或三元運算子根據條件設定屬性的值。例如，您可能有一個元件期望一個“color”prop，但您只希望在滿足特定條件時才設定“color”prop。在這種情況下，您可以使用條件語句僅在滿足條件時才設定“color”prop。

示例步驟

使用以下命令建立一個新的 React TypeScript 專案：

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”。從邏輯上講，我們嘗試使用三元運算子在網頁上顯示 userId（如果 userId 不等於 0），並且我們僅在 username 不是空字串時使用&&運算子顯示 username。

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