Bagaimana anda menggunakan jika/pernyataan lain dalam JSX?

Bagaimana anda menggunakan jika/pernyataan lain dalam JSX?

Menggunakan if/else KEPUTUSAN Secara langsung dalam JSX boleh menjadi rumit kerana JSX digunakan terutamanya untuk menerangkan apa yang kelihatan seperti UI, dan ia tidak semestinya menyokong penyata aliran kawalan tradisional. Walau bagaimanapun, anda masih boleh menguruskan logik bersyarat dalam JSX anda dengan menggunakan aliran kawalan JavaScript di luar JSX, atau dengan menggunakan teknik lain seperti ekspresi bersyarat dalam talian.

Berikut adalah contoh bagaimana anda boleh menggunakan if/else logik dalam komponen React sebelum memberikan JSX:

 <code class="jsx">function MyComponent(props) { let message; if (props.isLoggedIn) { message = <h1>Welcome back!</h1>; } else { message = <h1>Please log in.</h1>; } return ( <div> {message} </div> ); }</code>

Dalam contoh ini, pernyataan if/else digunakan di luar JSX untuk menetapkan message berubah -ubah, yang kemudiannya diinterpolasi ke JSX. Pendekatan ini menjadikan JSX anda bersih dan memberi tumpuan kepada rendering.

Bolehkah saya menggunakan pengendali ternary untuk rendering bersyarat di jsx?

Ya, anda boleh menggunakan pengendali ternary secara langsung dalam JSX untuk rendering bersyarat. Ini adalah corak yang sama dan boleh menjadi sangat ringkas. Pengendali ternary membolehkan anda membuat unsur atau komponen yang berbeza berdasarkan keadaan secara langsung dalam JSX anda.

Berikut adalah cara anda boleh menggunakan pengendali ternary dalam JSX:

 <code class="jsx">function MyComponent(props) { return ( <div> {props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>} </div> ); }</code>

Dalam contoh ini, pengendali ternary memeriksa prop isLoggedIn dan menjadikan unsur -unsur JSX yang berbeza berdasarkan nilainya. Pendekatan ini berguna untuk senario rendering bersyarat mudah secara langsung dalam JSX anda.

Apakah alternatif jika/lain untuk menguruskan logik bersyarat dalam komponen React?

Terdapat beberapa alternatif untuk if/else untuk menguruskan logik bersyarat dalam komponen React, masing -masing dengan kes dan faedah penggunaannya sendiri:

1. Pengendali Ternary : Seperti yang telah disebutkan, pengendali ternary boleh digunakan secara langsung di JSX untuk rendering bersyarat ringkas.

2. Operator Logical && : Ini berguna untuk kondisinya termasuk elemen dalam JSX anda. Jika keadaan itu true , elemen selepas && akan diberikan.

    <code class="jsx">function MyComponent(props) { return ( <div> {props.isLoggedIn && <h1>Welcome back!</h1>} {!props.isLoggedIn && <h1>Please log in.</h1>} </div> ); }</code>

3. Penilaian Litar Pendek : Sama seperti pengendali logik && , tetapi lebih maju, membolehkan hasil yang berbeza berdasarkan keadaan yang berbeza tanpa menggunakan if/else .

4. React.usememo Hook : Berguna untuk nilai pengkomputeran yang mahal untuk dikira.

    <code class="jsx">const message = React.useMemo(() => { if (props.isLoggedIn) { return <h1>Welcome back!</h1>; } else { return <h1>Please log in.</h1>; } }, [props.isLoggedIn]);</code>

5. Komponen Komponen : Anda boleh membuat komponen berasingan untuk keadaan yang berbeza dan menjadikannya secara kondusif.

    <code class="jsx">function LoggedInMessage() { return <h1>Welcome back!</h1>; } function LoggedOutMessage() { return <h1>Please log in.</h1>; } function MyComponent(props) { return ( <div> {props.isLoggedIn ? <loggedinmessage></loggedinmessage> : <loggedoutmessage></loggedoutmessage>} </div> ); }</code>

Bagaimanakah saya boleh mengelakkan penggunaan jika/lain pernyataan secara langsung di dalam jsx untuk dibaca semula kod yang lebih baik?

Untuk meningkatkan kebolehbacaan kod dan elakkan menggunakan if/else pernyataan secara langsung di dalam JSX, anda boleh melaksanakan strategi berikut:

1. Ekstrak logik bersyarat di luar JSX : Seperti yang ditunjukkan dalam contoh pertama, anda boleh menggunakan if/else di luar JSX anda untuk menetapkan pembolehubah atau fungsi yang akan digunakan dalam JSX. Ini menjadikan JSX bersih dan menjadikan logik lebih mudah dibaca.

2. Gunakan fungsi penolong : Anda boleh menentukan fungsi penolong yang merangkumi logik bersyarat dan kemudian panggil fungsi -fungsi ini dalam JSX anda.

    <code class="jsx">function getMessage(isLoggedIn) { if (isLoggedIn) { return <h1>Welcome back!</h1>; } else { return <h1>Please log in.</h1>; } } function MyComponent(props) { return ( <div> {getMessage(props.isLoggedIn)} </div> ); }</code>

3. Komponen Komponen : Dengan memecahkan UI anda ke dalam komponen yang lebih kecil dan boleh diguna semula, anda boleh menguruskan rendering bersyarat dengan lebih berkesan. Setiap komponen boleh mengendalikan logiknya sendiri dan diberikan secara syarat berdasarkan prop.
4. Menggunakan cangkuk : Cangkuk reaksi seperti useMemo boleh digunakan untuk mengira nilai -nilai yang mempengaruhi JSX anda, menjaga logik berasingan dari JSX itu sendiri.

Dengan menggunakan strategi ini, anda dapat memastikan bahawa JSX anda tetap boleh dibaca dan memberi tumpuan kepada menggambarkan UI, sementara logik bersyarat anda dikendalikan dengan cara yang lebih mudah diurus dan dapat dipelihara.

Atas ialah kandungan terperinci Bagaimana anda menggunakan jika/pernyataan lain dalam JSX?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!