非自闭 HTML element/React 组件的三元运算符

Question

如何在两个非自闭 React 组件之间选择一个三元运算符？我正在创建启动页面并希望显示背景图片或视频。如果我的 bkgd image & video 组件有自关闭标签会很容易，但是这些组件会包裹页面上的所有内容。

此代码无效，因为 BGVideo 和 ImageContainer 没有结束标记：

const SplashView = ({ videoSrc, imageSrc, overlayColor}) => {
   return (
        { videoSrc ? (
            <BGVideo src={videoSrc} bgColor={overlayColor}>
            ) : (
                <ImageContainer imgSrc={imageSrc} bgColor={overlayColor}>
                ) 
        }
            <SplashContentContainer>
                <Logo />
                <Link />
                <OtherChildrenComponents />
            </SplashContentContainer>
        {videoSrc ? </BGVideo> : </ImageContainer>}
  )
}

我想避免在三元运算符中复制所有子组件：

return (
        { videoSrc ? (
            <BGVideo src={videoSrc} bgColor={overlayColor}>
                <SplashContentContainer>
                    <Logo />
                    <Link />
                    <OtherChildrenComponents />
                </SplashContentContainer>
            </BGVideo>
            ) : (
                <ImageContainer imgSrc={imageSrc} bgColor={overlayColor}>
                    <SplashContentContainer>
                        <Logo />
                        <Link />
                        <OtherChildrenComponents />
                    </SplashContentContainer>
                </ImageContainer>
                ) 
        }
  )

Answer 1

您可以将子组件存储在变量中以避免重复。

const splash = (
    <SplashContentContainer>
        <Logo />
        <Link />
        <OtherChildrenComponents />
    </SplashContentContainer>
);

return (
    <>
        {videoSrc ? (
            <BGVideo src={videoSrc} bgColor={overlayColor}>{splash}</BGVideo>
        ) : (
            <ImageContainer imgSrc={imageSrc} bgColor={overlayColor}>{splash}</ImageContainer>
        )
    </>
);

非自闭 HTML element/React 组件的三元运算符

Ternary Operator for non self-closing HTML element/React component

reactjs

react-component