如何在ReactJS JSX中實現條件渲染？

在 ReactJS JSX 中使用 if-else 語句

在 ReactJS 中，if-else 語句不能直接在 JSX 中使用。這是因為 JSX 轉換為 JavaScript 函數調用，而 if-else 語句與此語法不相容。

使用三元運算子進行條件渲染

條件渲染的一種方法就是使用三元運算子：

render() {
    return (
        <View>

在這個範例中，如果state屬性的值value 等於“news”，則呈現內容為“data”的Text 元素。否則，將渲染 null，從而有效隱藏元素。

基於函數的條件渲染

另一個選項是建立一個函數來處理條件渲染並呼叫它來自JSX：

renderElement() {
    if (this.state.value == 'news') {
        return data;
    }
    return null;
}

render() {
    return (
        <View>

在這種情況下，renderElement() 函數檢查值狀態並傳回文字元素或null。然後，JSX 呼叫 renderElement() 函數來有條件地渲染所需的元素。

以上是如何在ReactJS JSX中實現條件渲染？的詳細內容。更多資訊請關注PHP中文網其他相關文章！