有没有更好的方式来使用jsx内的条件？

Question

过去几周里我一直在学习React，而我不喜欢的一件事是我必须在渲染函数内部使用三元运算符。

喜欢的东西：

function render() { 
    return (
     {x==="Let's go" ? <Go /> : <Hold on />} 
    ) 
} 

有没有一种方法，我可以使用传统的if-else或开关与JSX语法此事反应是？

Answer 1

我利用一些方法来清理成分较复杂的渲染方法。

1）使用变量。在实际处于JSX部分（返回）之前，您可以使用原始JS的灵活性来构建变量。以你为例...

function render() { 
    let body; 
    if (x === "Let's go") { 
     body = <Go /> 
    } else { 
     body = <Hold on />; 
    } 
    return (
     <div> 
      {body} 
     </div> 
    ); 
} 

请注意，最高级别需要包装，只是把一个额外的div在那里。

2）使用函数。这个例子可能有点过于简单化，但你会得到的想法..

renderBody() { 
    let body; 
    if (x === "Let's go") { 
     body = <Go /> 
    } else { 
     body = <Hold on />; 
    } 
    return (
     {body} 
    ) 
} 

render() { 
    return (
     <div> 
      {renderBody()} 
     </div> 
    ) 
} 

3）使用数组（真正的＃1的子集），但通常情况下，我觉得在那里有时我需要回到1元的方案但有时我需要返回可变数量的元素。我将在函数的顶部创建一个数组，然后将元素推入/取消移位到数组上。请注意，只要您正在构建数组，您必须为每个元素提供一个键，以便React可以正确更新它。

let els = [ 
    <div key="always">Always here</div> 
]; 
if (foo) { 
    els.push(<div key="ifFoo">Conditionally Here</div>) 
} 

然后你只需在你的主JSX中使用{els}变量。

4）当你不想渲染任何东西时返回null

Answer 2

我喜欢这种语法

function render() { 
    if (x==="Let's go") return <Go />; 
    return <Hold on />; 
}