Question

我目前正在尝试创建一个页面，其中主页有背景图像而其他页面没有。我正在尝试添加条件渲染来完成此任务。我的代码如下，接着是我想要的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>
            )
        }
    }
}

我认为我已经让自己变得更加困难然后它需要，但我对道具和状态非常新，我无法通过阅读其他问题来解决这个问题。我只是想在我的初始状态（“/”）和{home}组件上显示背景图像，其他组件上没有背景图像。有人可以帮忙吗？

Answer 1

您可以通过几种方式实现此输出。但是使用window.location.href并不好，因为您正在使用react-router。（这里window.location.href是一个浏览器变量，其中输出将是完整的URL，例如http://ab.com/12/cd，并且必须解析才能获得实际的应用程序路径。）
而是使用this.props.location的{{1}}属性。检查当前路线并在react-router或constructor功能中设置需要的背景。

render

然而，这与给出的建议代码一致。另一种可能的方法是将背景图像放置在那些相关组件中而不检查URL或路由。作为某个地方的示例，render(){ const { location } = this.props const imgSrc = null if(location.pathname == "/" || location.pathname == "/home"){ imgSrc = "ab.com/cd.jpg" } return ( { imgSrc && <div ..... > </div>} ) }

应该有<Router>的实例

react-router

在<Router> <Route path="/" component={BasicComponent} <Route path="/home" component={HomeComponent} <Route path="/other" component={OtherComponent} </Router>和BasicComponent中，您可以在HomeComponent函数中包含背景图片。这也是一种可行的方法。

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

1 个答案: