如何在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 />}
)
}