Question

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

类似的东西：

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

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

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个元素的场景，但有时我需要返回可变数量的元素。我将在函数的顶部创建一个数组，然后将/ unshift元素推送到数组上。请注意，无论何时构建数组，都必须为每个元素提供一个键，以便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 />;
}

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

2 个答案: