如何在reactjs片段中动态包装cover div

【问题标题】：How to wrap cover div inside reactjs fragments dynamically如何在reactjs片段中动态包装cover div
【发布时间】：2019-12-07 17:37:05
【问题描述】：

只有在满足某些条件时，我才尝试将 html 包裹在内部 div 周围。但是当我运行脚本时，它说 Module build failed: SyntaxError Unexpected token。我尝试使用条件渲染。

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>
);

【问题讨论】：

标签： html reactjs jsx

【解决方案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"/> : '' 因为标签已关闭

【讨论】：