React - 使用条件渲染和 window.location.href 来更改背景图像

IT技术 reactjs react-router conditional
2021-05-07 00:22:08

我目前正在尝试创建一个页面，其中主页有背景图像而其他页面没有。我正在尝试添加条件渲染来实现这一点。我的代码在下面，后面是我想放的 App 组件，但是我的语法显然是错误的（React noobie）。

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

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

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

我想我已经让这对自己变得更加困难了，但我对props和状态很陌生，我无法从阅读其他问题中弄清楚。我只想在我的初始状态 ("/") 和 {home} 组件上显示背景图像，而在其他组件上没有背景图像。任何人都可以帮忙吗？

1个回答

有几种方法可以实现此输出。但是使用window.location.href并不好，因为您正在使用react-router. （这里window.location.href是一个浏览器变量，其中输出将是完整的URL，例如http://ab.com/12/cd，将不得不解析得到实际的应用途径。）
而是使用this.props.location的财产react-router。如果需要，请检查当前路线并设置背景constructor或render功能。

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>from 的实例react-router

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

在这里BasicComponent和HomeComponent你可能包括背景图片render功能。这也是一种可行的方法。

其它你可能感兴趣的问题
上一篇将 UseState 从子组件传递到父组件？ 下一篇可选地将参数传递给正在传递的函数