React - 基于 windowWidth 的渲染组件答案

【问题标题】：React - Render Component based on windowWidthReact - 基于 windowWidth 的渲染组件
【发布时间】：2018-05-29 18:44:56
【问题描述】：

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

条件如下：

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

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

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

这是我目前所拥有的，我有一个调整大小的函数来获取“window.innerWidth”并像这样更新状态：

resize() {
        let windowWidth = window.innerWidth;

        this.setState({
            windowWidth: windowWidth
        })
    }

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

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

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 
}

【问题讨论】：

问题是什么？
有什么理由不能使用 CSS 媒体查询？这正是它们的用途，它们更快、更可靠、响应更迅速
我正在使用媒体查询，但我不想在页面上呈现桌面组件以进行初始加载。
如果他试图根据窗口大小有条件地渲染一个反应组件，他就不能使用 css。
如果是这样，我建议您检查用户代理 (stackoverflow.com/a/11381730/4671195) 进行初始测试，然后在之后显示/隐藏媒体查询

标签： javascript reactjs

【解决方案1】：

您可以执行以下操作来根据您的屏幕宽度值以及是否存在视频道具来渲染组件：

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

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

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

【讨论】：

【解决方案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>

【讨论】：