javascript - react jsx kullanırken if-else koşulu neden çalışmıyor

React kodu yazarken JSX içinde if-else yazmak çalışmıyor.

<div id={if (condition) { 'msg' }}>Hello World!</div>

Ancak üçlü operatör kullanmak işe yarıyor.

<div id={condition ? 'msg' : null}>Hello World!</div>

bu neden oluyor?

Cevap #1

Senin JSX'in

<div id={condition ? 'msg' : null}>Hello World!</div>

kendi başına geçerli bir Javascript değil, aşağıdaki ReactJS çağrısına derlenecektir:

React.createElement(
  'div',                            // Element "tag" name.
  { id: condition ? 'msg' : null }, // Properties object.
  'Hello World!'                    // Element contents.
);

bu, Javascript çalışma zamanı ortamınız tarafından yorumlanmaya/derlenmeye hazır olan geçerli bir Javascript'tir. Gördüğünüz gibi, o ifadeye bir if-else sıkıştırmanın hiçbir yolu yoktur, çünkü geçerli bir Javascript'e derlenemez.

Bunun yerine hemen çağrılan bir fonksiyon ifadesi kullanabilir ve içinden döndürülen değeri iletebilirsiniz:

<div id={(function () {
    if (condition) {
        return "msg";
    } else {
        return null;
    }
})()}>Hello World!</div>

bu, aşağıdaki geçerli Javascript'e derlenecektir:

React.createElement(
    "div",
    {
        id: (function () {
            if (condition) {
                return "msg";
            } else {
                return null;
            }
        })()
    },
    "Hello World!"
);

Cevap #2

if-else ifadeleri JSX içinde çalışmaz. Bunun nedeni JSX'in sadece fonksiyon çağrıları ve nesne oluşturma için sözdizimsel şeker olmasıdır. React Belgeleri