在JSX中调用Props调用无效语法错误

我正在创建一个函数组件,它必须仅在某些变量不为空的情况下呈现。我想将确定组件是否直接在组件本身中渲染的逻辑合并在一起(以清理父组件)。

组件渲染函数的存在形式为:

return(
    {
        props.var1 && props.var2 &&
        (<div ...
            </div>
        </div>)
    }
)

但是,我遇到一个语法错误,指向中的点('.') props.var1 带有消息:

Unexpected token, expected "," 

如果我删除 props.var1 && ,我在上遇到了同样的错误 props.var2 。

为什么会发生这种情况,我该如何规避?