React render 函數中可以使用 if...else... 語句嗎？

Question

基本上，我有一個react元件，它的render()函數體如下：（這是我的理想元件，這意味著它目前不起作用）

render(){
    return (
        <div>
            <Element1/>
            <Element2/>

            // note: logic only, code does not work here
            if (this.props.hasImage) <ElementWithImage/>
            else <ElementWithoutImage/>

        </div>
    )
}

#

Answer 1

其實有一種方法可以完全滿足OP的要求。只需渲染並呼叫匿名函數，如下所示：

render () {
  return (
    

      {(() => {
        if (someCase) {
          return (
            
someCase
          )
        } else if (otherCase) {
          return (
            
otherCase
          )
        } else {
          return (
            
catch all
          )
        }
      })()}
    
  )
}

Answer 2

不完全一樣，但有解決方法。 React 文件中有一個關於條件渲染的部分，您應該看一下。以下是使用內聯 if-else 可以執行的操作的範例。

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    

      {isLoggedIn ? (
        
      ) : (
        
      )}
    
  );
}

您也可以在渲染函數內處理它，但在傳回 jsx 之前。

if (isLoggedIn) {
  button = ;
} else {
  button = ;
}

return (
  

    
    {button}
  
);

也值得一提的是 ZekeDroid 在評論中提出的內容。如果您只是檢查條件並且不想呈現不符合條件的特定程式碼段，則可以使用 && 運算子。

return (
    

      
Hello!
      {unreadMessages.length > 0 &&
        

          You have {unreadMessages.length} unread messages.
        
      }
    
  );