JSX內的開關盒不工作：ReactJS

Question

在我的reactjs組件 - 在渲染中，我想創建一個開關盒，它將使用基於開關盒的特定組件。但是這裏有一個語法錯誤。

我應該只是把它作爲組件內的一個函數嗎？

意外令牌（190：32）

188 | 
    189 | { 
> 190 |  return (
     | ^

下面是該組件的全返回功能：

return (
    <div className="Page"> 
     .... 
    { 
     elements.map(function(element, index){ 
      return (
       <Col xs={24} sm={element["grid-width"]*2} md={element["grid-width"]} key={index} className="element-container"> 
        ..... 
         <div className="contents"> 
         { 
          return (
          switch (element.type) { 
           case 'we-are-always-here-to-help': 
           sss 
           break; 
           case 'call-us-when-you-are-having-difficulties': 
           xx 
           break; 
           default: 
          } 
         ) 
         } 
         </div> 
       </Col> 
      ) 
     }) 
    } 
    </div> 
) 

Answer 1

Rule：

我們可以把任何表達式裏面沒有聲明JSX通過使用{}。

這不是一個有效的語法，我們不能直接在JSX中使用switch語句或任何其他語句。

解：

把所有的開關部分邏輯函數內部，呼叫從JSX該功能，並返回結果。

寫這樣的：

<div> 
    {this._switchPart(element.type)} 
</div> 

定義_switchPart這樣的：

_switchPart(type){ 
    switch (type) { 
     case 'we-are-always-here-to-help': return sss; 

     case 'call-us-when-you-are-having-difficulties': return xx; 

     default: return xy; 
    } 
} 

或者使用ternary operator有條件的渲染，或者您也可以使用IIFE。

Answer 2

您可以使用IIFE像這樣：

{(() => { 
    switch (element.type) { 
    case 'we-are-always-here-to-help': 
     return sss; 
     break; 
    case 'call-us-when-you-are-having-difficulties': 
     return xx; 
     break; 
    default: 
     return dd; 
    } 
})()} 

Answer 3

工作示例針對此問題：

class Example extends React.Component { 
    constructor() { 
     super(); 
    } 

    renderView() { 
     switch (this.props.viewName) { 
      case 'index': { 
       return (<div>Index</div>); 
      } 

      default: { 
       return <div>404 Error</div>; 
      } 
     } 
    } 

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

ReactDOM.render(<Example viewName="index" />, document.getElementById("root"));