Question

我正在研究React.js Movie项目，并做了一些设计更改，例如在导航到另一个页面时隐藏SearchBar。

以下是一些js文件供参考

Home.js

 <HeroImage
 image={`${IMAGE_BASE_URL}${BACKDROP_SIZE}${heroImage.backdrop_path}`}
 title={heroImage.original_title}
 text={heroImage.overview}/>
 <Header callback={this.searchItems}/>
 </div> : null }
 <div className="rmdb-home-grid">
 <FourColGrid
  header={searchTerm ? 'Search Result' : 'Popular Movies'}
 loading={loading}             >
 {movies.map( (element, i) => (
 <MovieThumb
 key={i}
 clickable={true}
 image={element.poster_path ? 
`${IMAGE_BASE_URL}${POSTER_SIZE}${element.poster_path}` : 
'./images/no_image.jpg'}
  movieId={element.id}
 movieName={element.original_title}
    />
  ))}

App.js

<React.Fragment>
    <Header />
    <Switch>
      <Route path="/" component={Home} exact />
      <Route path="/:movieId" component={Movie} exact />
      <Route component={NotFound} />
    </Switch>

Header.js {/ * SearchBar的代码* /}

 <div className="rmdb-searchbar">
 <div className="rmdb-searchbar-content">
 <input type="text" className="rmdb-searchbar-input"
 placeholder="Search..."
 onFocus={(e) => e.target.placeholder = " "} 
 onBlur={(e) => e.target.placeholder= "Search..."}
 onChange={this.doSearch}
 value={this.state.value} />
 <FontAwesome className="rmdb-fa-search circle icon" 
 name="search" size="2x"/>
 </div>
 </div>

Answer 1

为您提供的几种选择

您可以使用switch并选择在哪个路径中显示哪个组件。或者，如果您使用react-router，也可以使用从道具中获取位置的信息；如果不使用，则可以从文档中获取位置的信息，

setInterval

Answer 2

基本上，您需要Header组件来订阅更新，或者在用户离开页面时使用有关pathname的新信息进行更新。

使用来自react-router-dom库的withRouter。这会将更新后的道具传递到Header组件，包括诸如新的pathname之类的信息。

然后，您可以通过props.location.pathname中的道具提取该路径名。有了我们可用的数据，我们可以使用条件逻辑来确定我们要在哪些页面上显示您的搜索栏。

在下面的示例中，我们将其设置为仅当您在Home路线上时才显示搜索栏。

Header.js

import { withRouter } from "react-router-dom

const Header = (props) => {
    const location = props.location.pathname;
    const atHome = location === "/";

   return (
     <div>
        ...other markup
        {atHome && (
          <div className="rmdb-searchbar">
            <div className="rmdb-searchbar-content">
              <input
                 type="text"
                 className="rmdb-searchbar-input"
                 placeholder="Search..."
                 onFocus={e => (e.target.placeholder = " ")}
                 onBlur={e => (e.target.placeholder = "Search...")}
                 onChange={this.doSearch}
                 value={this.state.value}
              />
              <FontAwesome
                 className="rmdb-fa-search circle icon"
                 name="search"
                 size="2x"
               />
             </div>
           </div>
         )}

     </div>
   )
}

export default withRouter(Header)

我已在此代码和框中复制了类似的内容供您参考：https://codesandbox.io/s/using-withrouter-to-have-components-subscribe-to-routing-i9mt6

如何在其他页面上隐藏搜索栏

2 个答案: