/

在React中的條件渲染

在React中的條件渲染

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

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

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

1
2
3
4
5
const Pet = (props) => {
 return (
 {props.isDog ? <Dog /> : <Cat />}
 )
}

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

1
2
3
4
5
6
const Pet = (props) => {
 return (
 {props.isDog && <Dog />}
 {props.isCat && <Cat />}
 )
}

tags: [“React”, “JSX”, “條件渲染”]