如何在React中動態輸出某些元素或其他元素

在React的元件JSX中,您可以基於條件進行動態決定要輸出的元件或其他元素,或者只是其中一部分的JSX。

最常見的方式可能是使用三元運算符:

const Pet = (props) => {
 return (
 {props.isDog ? <Dog /> : <Cat />}
 )
}

另一種方式是使用&&運算符,當您概念上只有if而無else時,這種方式很好用。它的運作方式是:如果它之前的表達式求值為true,則打印之後的表達式:

const Pet = (props) => {
 return (
 {props.isDog && <Dog />}
 {props.isCat && <Cat />}
 )
}