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

Question

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

类似于：

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

有没有一种方法可以让我在 React 中使用传统的 if-else 或 switch 来处理 jsx 语法？

Answer 1

我更喜欢这种语法

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

Answer 2

我使用一些方法来清理更复杂组件的渲染方法。

1) 使用变量。在您实际进入 JSX 部分（return）之前，您可以使用原始 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 的一个子集）但我经常发现有时我需要 return 1 个元素但其他时候我需要 return 可变数量的场景元素。我将在函数顶部创建一个数组，然后将 push/unshift 元素添加到数组中。请注意，无论何时构建数组，都必须为每个元素提供一个键，以便 React 可以正确更新它。

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

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

4) Return null 当你不想渲染任何东西时

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

Is there a better way to use conditionals inside jsx?

jsx

reactjs