反应-对window.location.href使用条件渲染来更改背景图像

问题描述

我当前正在尝试创建一个页面，该页面的主页具有背景图像，而其他页面则没有。我正在尝试添加条件渲染来完成此操作。我的代码在下面，后面是我想放的App组件，但是我的语法显然是错误的（React noobie）。

I'm currently trying to create a page where the home page has a background image and the other pages do not. I'm trying to add conditional rendering to accomplish this. My code is below, followed by the App component I want to put it on, but my syntax is clearly wrong (React noobie).

if window.location.href == "/" || "/home" ?
    background = url;
else:
    background = none;

这是我的app.js（我在MainNav组件中使用React-router）：

Here is my app.js (I'm using React-router in the MainNav component):

class App extends Component {
    constructor(props) {
    super(props);


        render() {
            return (
    <div className="App">

      <div className="contentContainer">
        <div className="navMenu">
          <NavHeader/>
        </div>
        <div className="sideLeftNav">
          <SidebarLeft/>
        </div>
        <div className="content">
          <MainNav/>
        </div>
        <div className="sideRightNav">
          <SidebarRight/>
        </div>
        <div className="footer">
          <Footer/>
        </div>
      </div>

    </div>
            )
        }
    }
}

我认为我在我本来就需要，但是我对道具和状态非常陌生，我无法通过阅读其他问题来弄清楚。我只想在初始状态（ /）和{home}组件上显示背景图像，而在其他组件上没有背景图像。有人可以帮忙吗？

I think I've made this more difficult on myself then it needs to be, but I'm very new to props and state and I can't figure it out from reading other problems. I simply want to display the background image on my initial state ("/") and {home} component, with no background image on the other components. Can anyone help?

推荐答案

有几种方法可以实现此输出。但是，使用 window.location.href 并不是很好，因为您使用的是反应路由器。 （此处 window.location.href 是一个浏览器变量，其中的输出将是完整的url，例如 http://ab.com/12/cd ，并且必须进行解析以获取实际的应用程序路由。）

而不是使用 this.props.location 属性c $ c>反应路由器。检查当前路线并在构造函数或 render 函数中设置背景（如果需要）。

There's few ways you could achieve this output. But using window.location.href is not nice since you're using react-router. (Here window.location.href is a browser variable where output will be complete url such as http://ab.com/12/cd and will have to parse to get actual application route.)
Instead use this.props.location property of react-router. Check current route and set background if need-be in either constructor or render function.

render(){
   const { location } = this.props
   const imgSrc = null

   if(location.pathname == "/" || location.pathname == "/home"){
      imgSrc = "ab.com/cd.jpg"
   }

   return (
      { imgSrc && <div ..... > </div>}
   )
}

但是，这与给出的建议代码一​​致。另一种可能的方法是将背景图像放置在那些相关的组件中，而无需检查url或路由。例如在某处，应该有< Router> 来自 react-router

However this is in accordance with suggested code given. Another possible approach is placing background image within those relevant component without checking for url or route. As an example somewhere, there should be instance of <Router> from react-router

<Router>
  <Route path="/" component={BasicComponent}
  <Route path="/home" component={HomeComponent}
  <Route path="/other" component={OtherComponent}
</Router>

在 BasicComponent 和 HomeComponent ，您可以在 render 函数中包含背景图像。这也是一种可行的方法。

Here in BasicComponent and HomeComponent you could include background image in render function. This is also a viable approach.

这篇关于反应-对window.location.href使用条件渲染来更改背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！