如何使用条件三元运算符进行 jsx react？

Question

我想根据 isOpen 值返回 null 或 jsx。下面是我的代码，function Child ()  {    const isOpen = true;    return (        <Fragment>            <wrapper>                <div> title</div>                <button> click me </button>            </wrapper>        </Fragment>    )}我如何使用三元运算符返回空值或基于isOpen值的上述jsx。如果为 true，则返回 jsx（如果不是空）。有人可以帮我这个。谢谢。

Answer 1

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

如果出现以下情况，则返回空值：isOpen == false

function Child ()  {

    const isOpen = true;

    if (!isOpen) return null;

    return (

        <Fragment>

            <wrapper>

                <div> title</div>

                <button> click me </button>

            </wrapper>

        </Fragment>

    )

}

使用运算符：&&

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

    )

}