有没有更好的方法在 jsx 中使用条件？答案

【问题标题】：Is there a better way to use conditionals inside jsx?有没有更好的方法在 jsx 中使用条件？
【发布时间】：2016-06-11 11:51:34
【问题描述】：

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

类似：

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

有没有办法在 React 中使用传统的 if-else 或 switch 与 jsx 语法？

【问题讨论】：

标签： reactjs jsx

【解决方案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

【讨论】：

感谢您的详细解释。我发现随着我的组件变得越来越大，使用所有花括号进行调试变得很困难。当我重构我的代码时，我肯定会使用这些想法

【解决方案2】：

我更喜欢这种语法

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

【讨论】：

是的，但是你如何处理更复杂的组件？
那么你可能需要使用三元表达式。