如何使用条件三元运算符进行 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 == falsefunction Child ()&nbsp; {&nbsp; &nbsp; const isOpen = true;&nbsp; &nbsp; if (!isOpen) return null;&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <Fragment>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <wrapper>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div> title</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button> click me </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </wrapper>&nbsp; &nbsp; &nbsp; &nbsp; </Fragment>&nbsp; &nbsp; )}使用运算符：&&function Child ()&nbsp; {&nbsp; &nbsp; const isOpen = true;&nbsp; &nbsp; return isOpen && (&nbsp; &nbsp; &nbsp; &nbsp; <Fragment>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <wrapper>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div> title</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button> click me </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </wrapper>&nbsp; &nbsp; &nbsp; &nbsp; </Fragment>&nbsp; &nbsp; )}

Answer 2

只需使用三元：function Child ()&nbsp; {&nbsp; &nbsp; const isOpen = <whatever-condition>;&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; isOpen ?&nbsp; &nbsp; &nbsp; &nbsp; <Fragment>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <wrapper>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div> title</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button> click me </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </wrapper>&nbsp; &nbsp; &nbsp; &nbsp; </Fragment>&nbsp; &nbsp; &nbsp; &nbsp; : null&nbsp; &nbsp; )}