如何使用条件三元运算符进行 jsx 反应？ [关闭]

Question

我想根据 isOpen 值返回 null 或 jsx。

下面是我的代码，

function Child ()  {
    const isOpen = true;
    return (
        <Fragment>
            <wrapper>
                <div> title</div>
                <button> click me </button>
            </wrapper>
        </Fragment>
    )
}

如何使用三元运算符根据 isOpen 值返回 null 或上述 jsx。如果它是真的，它应该返回 jsx 如果不​​为空。

有人可以帮我解决这个问题吗？谢谢。

Answer 1

您实际上不需要三元运算符来执行此操作。

1. 如果isOpen == false返回null：

function Child ()  {
    const isOpen = true;

    if (!isOpen) return null;

    return (
        <Fragment>
            <wrapper>
                <div> title</div>
                <button> click me </button>
            </wrapper>
        </Fragment>
    )
}

1. 使用&&运算符：

function Child ()  {
    const isOpen = true;
    return isOpen && (
        <Fragment>
            <wrapper>
                <div> title</div>
                <button> click me </button>
            </wrapper>
        </Fragment>
    )
}

Answer 2

只需使用三元：

function Child ()  {
    const isOpen = <whatever-condition>;
    return (
        isOpen ?
        <Fragment>
            <wrapper>
                <div> title</div>
                <button> click me </button>
            </wrapper>
        </Fragment>
        : null
    )
}