Rumah > hujung hadapan web > tutorial js > Sifat bersyarat menggunakan React with TypeScript

Sifat bersyarat menggunakan React with TypeScript

WBOY
Lepaskan: 2023-09-05 17:29:07
ke hadapan
1420 orang telah melayarinya

Dalam React with TypeScript, anda boleh menggunakan pemaparan bersyarat untuk memilih perkara yang hendak dipaparkan berdasarkan syarat. Ini berguna apabila memaparkan kandungan atau komponen yang berbeza berdasarkan kriteria tertentu. Terdapat beberapa cara berbeza untuk melaksanakan pemaparan bersyarat dalam React menggunakan TypeScript. Satu cara ialah menggunakan operator bersyarat (juga dipanggil operator ternary). Operator ini menerima syarat dan mengembalikan nilai jika syarat itu benar atau nilai lain jika syarat itu palsu.

Anda juga boleh membuat komponen secara bersyarat berdasarkan syarat menggunakan pengendali &&. Operator menilai kepada benar jika nilai di sebelah kiri operator adalah benar jika nilai di sebelah kiri operator adalah palsu, operator menilai kepada palsu.

Cara lain untuk melaksanakan pemaparan bersyarat ialah menggunakan pernyataan suis, yang membolehkan anda menguji nilai untuk berbilang syarat dan melaksanakan blok kod yang berbeza bergantung pada syarat yang sepadan dengan nilai tersebut.

Secara umumnya, apabila melaksanakan pemaparan bersyarat, sebaiknya gunakan kaedah paling mudah yang memenuhi keperluan anda. Ini boleh menjadikan kod lebih mudah dibaca dan difahami.

Atribut bersyarat

Dalam React, sifat menghantar data daripada komponen induk kepada komponen anak. Sifat bersyarat hanya ditetapkan pada komponen di bawah syarat tertentu.

Dengan menggunakan TypeScript dengan React, anda boleh menaip-menyemak kod anda dan memberikan definisi jenis untuk sifat yang komponen anda harapkan untuk diterima. Ini boleh membantu menangkap ralat dan menjadikan kod anda lebih mudah difahami dan diselenggara.

Untuk mencipta sifat bersyarat dalam komponen React menggunakan TypeScript, anda boleh menggunakan pernyataan "jika" atau operator ternary untuk menetapkan nilai harta berdasarkan syarat. Sebagai contoh, anda mungkin mempunyai komponen yang memerlukan sifat "warna", tetapi anda hanya mahu menetapkan sifat "warna" apabila syarat tertentu dipenuhi. Dalam kes ini, anda boleh menggunakan pernyataan bersyarat untuk menetapkan sifat 'warna' hanya apabila syarat dipenuhi.

Contoh langkah

  • Buat projek React TypeScript baharu menggunakan arahan berikut -

npx create-react-app my-app --template typescript
Salin selepas log masuk
  • Buat komponen baharu bernama "MyComponent" dalam folder src projek React, bernama "MyComponent.tsx".

  • Kemudian kita perlu menentukan antara muka Props untuk menggunakan konvensyen data TypeScript dalam React.

  • Kami boleh memaparkan sifat yang diluluskan secara bersyarat menggunakan pengendali ternary atau operator &&.

  • Daripada "App.tsx", kami mengimport MyComponent dan menggunakannya beberapa kali. Kami menggunakan komponen dengan nilai harta yang berbeza dan menyemak hasilnya di halaman web.

Contoh

Dalam contoh ini, kami menunjukkan sifat bersyarat menggunakan React dan TypeScript. Kami mendapat nilai hartanah dalam MyComponent melalui prop. Kami mengambil dua atribut, "userId" dan "username". Secara logiknya, jika useId tidak sama dengan 0, kami cuba memaparkan userId pada halaman web menggunakan operator ternary dan menggunakan operator && untuk memaparkan nama pengguna hanya jika nama pengguna bukan rentetan kosong.

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
Salin selepas log masuk

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
Salin selepas log masuk

Output

将 React 与 TypeScript 结合使用的条件属性

Contoh

Dalam contoh ini kita akan melihat sifat bersyarat dengan lebih cekap dan interaktif. Kami akan menerima input pengguna untuk memaparkan mesej dan data pada halaman web. Kami mengambil tiga sifat: "showMessgae", "showAlert" dan "count". Secara logiknya, kami akan menghantar sifat ini secara dinamik dalam MyComponent menggunakan peristiwa yang dicetuskan pengguna. Dalam App.tsx kami mempunyai empat butang "Tunjukkan Mesej", "Tunjukkan Makluman", "Tingkatkan Kiraan" dan "Kurangkan Kiraan". Kami juga mempunyai beberapa keadaan dalam App.tsx untuk memaparkan mesej, makluman dan menyimpan nilai kaunter. Secara logiknya, kami menukar keadaan untuk menukar sifat dalam 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
Salin selepas log masuk

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
Salin selepas log masuk

Output

将 React 与 TypeScript 结合使用的条件属性

Klik butang "Tunjukkan Mesej"

将 React 与 TypeScript 结合使用的条件属性

Klik butang "Tunjukkan Makluman"

将 React 与 TypeScript 结合使用的条件属性

Klik butang "Tingkatkan Kiraan"

将 React 与 TypeScript 结合使用的条件属性

Klik butang "Kurangkan Kiraan"

将 React 与 TypeScript 结合使用的条件属性

Menggunakan sifat bersyarat dengan React dan TypeScript ialah cara yang sangat berkuasa dan interaktif untuk membina sebarang aplikasi web. Ini adalah keperluan untuk pembangunan web moden.

Atas ialah kandungan terperinci Sifat bersyarat menggunakan React with TypeScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:tutorialspoint.com
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan