如何动态地包装Reactjs片段内部覆盖div

Question

我只是在满足某些条件时尝试将HTML包裹在内部DIV周围。但是，当我运行脚本时，它说模块构建失败了：SyntaxError意外令牌。我尝试使用条件渲染。

return (
    <Fragment>
        <div>
            {
                (true) ? <div class="imghvr-wrapper"> : ''
            }
            <div class="imghvr">
                <div class="imghvr-overlay imghvr-anim-none imghvr-anim-single">
            </div>
            {
                (true) ? </div> : ''
            }
        </div>
    </Fragment>
);

Answer 1

这样：

const myComponent = () => {
    const myCondition = true;
    const child = (
        <div className="imghvr">
            <div className="imghvr-overlay imghvr-anim-none imghvr-anim-single" />
        </div>
    );
    return (
        myCondition ? <div className="imghvr-wrapper">{ child }</div> : child
    );
};

您不能这样拆分标签：myCondition ? <div className="imghvr-wrapper"> : null您应该始终关闭标签。例如，该代码有效：(true) ? <div className="imghvr-wrapper"/> : ''，因为TAG已关闭