Question

如何通过计算页面宽度来呈现组件中的移动和桌面特定资源。看起来像三元表达式是通过计算窗口宽度的方式，但我遇到了问题。

以下是条件：

如果窗口大小大于500，那么将桌面组件渲染为桌面特定资产。

否则，渲染具有移动特定资产的移动组件。

此逻辑中的另一种情况是，如果提供了视频网址，则优先于后备图像。

这是我到目前为止所拥有的，我有一个resize函数来获取＆＃34; window.innerWidth＆＃34;并像这样更新状态：

resize() {
        let windowWidth = window.innerWidth;

        this.setState({
            windowWidth: windowWidth
        })
    }

我将变量windowWidth作为props传递给具有条件逻辑的组件。

到目前为止，这是我的逻辑：

render() {
        const {windowWidth, video, fallbackImage, mobileVideo, mobileImage, videoCallback, videoAnimationOffset} = this.props;
        return (
            <div className="hero-wrap col-xs-12 no-padding">
                {/* If video is available load otherwise render fallback image */}
                {video ? (
                    <div className="video-container">
                        <Video
                            video={video}
                            mobileVideo={mobileVideo}
                            videoCallback={videoCallback}
                            videoAnimationOffset={videoAnimationOffset}
                        />
                    </div>
                    ) : 
                    <div className="image-container" style={{backgroundImage: `url(${process.env.DB_URL}${fallbackImage})`}}>
                    </div> 
                }
            </div>
        )
    }

这可能是我认为可行的概念，但你不能嵌套三元表达式：

{/* If window width is greater than 500 render desktop */}
{windowWidth > 500 ? 
    {video ? (
        <div className="video-container">
            <Video
                video={video}
                mobileVideo={mobileVideo}
                videoCallback={videoCallback}
                videoAnimationOffset={videoAnimationOffset}
            />
        </div>
        ) : 
        <div className="image-container" style={{backgroundImage: `url(${process.env.DB_URL}${fallbackImage})`}}>
        </div> 
    } : null 
}

Answer 1

您可以执行以下操作，以根据屏幕宽度值呈现组件以及视频道具是否存在：

renderMobile = () => {
  return (
   <img ... />
  )
}    

renderDesktop = () => {
 if(this.props.video) {
  return (
   <video ... />
  )
 } else {
  return(
   <img ... />
  )
 }
}

render() {
 return(
  (this.state.windowWidth > 500) ? this.renderDesktop() : this.renderMobile()
 )
}

Answer 2

这似乎对我有用，你能检查一下吗？

return <div className="hero-wrap col-xs-12 no-padding">
  {
    windowWidth > 500 
    ? (video 
        ? <div className="video-container">
          <Video
              video={video}
              mobileVideo={mobileVideo}
              videoCallback={videoCallback}
              videoAnimationOffset={videoAnimationOffset}
          />
        </div>
      : <div className="image-container" style={{backgroundImage: `url(${process.env.DB_URL}${fallbackImage})`}}></div>) 
   : null
  }
</div>

React - 基于windowWidth渲染组件

2 个答案: