javascript - 如果使用 react 条件为假，如何返回空的 jsx？

Question

如果使用 React 条件失败，我不想渲染任何内容。

下面是我的代码，

function Parent () {
    const iconRef = React.createRef();
    const iconRect = iconRef && iconRef.getBoundingClientRect();
    return( 
        <button ref={iconRef}/>
        <Child iconRect={iconRect}/>
    );
}


function Child({iconRect}: Props) {
    return (
        {iconRect ? (
            <div class="wrapper">
                <div class="dialog">
                    //something
                </div>
            </div>
         ) : null}
     );
 }

但这不起作用。它给出错误 Syntax error unexpected token ,

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

Answer 1

删除不需要的大括号，它会按预期工作，这就是错误的原因

function Child({iconRect}: Props) {
    return (
        iconRect ? (
            <div class="wrapper">
                <div class="dialog">
                    //something
                </div>
            </div>
         ) : null
     );
 }