條件渲染反應JS（一個條件內狀態）

其實我試圖隱藏和顯示在一些HTML元素反應。我創建了一個僱員表格，其中我們有多個分區，例如個人信息，聯繫信息等...... 我在表單中創建了下一個和上一個按鈕，以表格形式顯示和隱藏其他分區有一個分區，其中我們有教育細節來填補，所以我選擇保留加號和減號按鈕來添加使用條件的教育細節。條件渲染反應JS（一個條件內狀態）

But finally, my problem is like i have complex conditions on **render** function: 

{someCondition && <div> 
{anotherCondition && <div></div>} 
</div>} 

But, i'm getting: *Adjacent JSX elements must be wrapped in an enclosing tag error*. So, what i'm supposed to do?

來源

2017-09-15 Manikanta B

你的返回塊的代碼是什麼樣的？ –

對不起兄弟，我不明白你的問題 –

從你給的代碼，我相信你需要這樣一個封閉標籤：

//div wraps everything else so the component can render. 
<div> 
{someCondition && <div> 
{anotherCondition && <div></div> 
</div>} 
</div>

來源

2017-09-15 07:47:54

你必須首先將它們包裝在一個div。此外，你的語法看起來有點不對（你錯過了關閉}）。

{someCondition && (
    <div> 
    {anotherCondition && <div></div>} 
    </div> 
)}

來源

2017-09-15 07:47:25 mersocarlin

感謝您的更正，但上面的代碼是不是我原來的代碼，我剛剛給我的問題的例子.. ;-) –

你必須總是返回一個單個元素包圍等。

由於有關條件的呈現，這裏有一些小竅門你可以考慮：

A.簡單的條件下，三元運算符是不夠乾淨：

return condition ? <p>abc</p> : <p>def</p>

B.對清潔代碼或創建渲染功能更復雜的if-else

renderButton =() => { 
    if (isLoading) { return false } 
    if (something) { 
    return <div></div> 
    } else { 
    return <div></div> 
    } 
} 

render() { 
    return (
    <div> 
     { this.renderButton } 
    </div> 
) 
}

C.與上面相同，但沒有創造新的功能：

render() { 
    return (
    <div> 
    { 
     (()=>{ 
     if (something) { 
      return <div></div> 
     } else { 
      return <div></div> 
     } 
     })() 
    } 
    </div> 
) 
}

來源

2017-09-15 09:18:55

條件渲染反應JS（一個條件內狀態）

回答

相關問題