Question

我的主页上有一个透明的导航栏。我想在每隔一页上给它一个黑色背景。你会怎么做？

上下文：React，没有Redux。

Answer 1

只需检查以下路线：

  import {withRouter} from 'react-router-dom';
    ...

    const SomeComponent = withRouter(props => <MyComponent {...props}/>);

    class MyComponent extends React.Component {
        ...
        SomeMethod () {
          const {pathname} = this.props.location;
          ...
        }
        ...

    }

Answer 2

假设您正确使用react-router-dom，则可以将Navbar HOC包装在withRouter组件中，然后从this.props.match.path检索实际位置。

然后，这取决于您使用的样式方法（CSS-in-JS，Styled-Components，Styled-JSX，CSS Modules等）。

例如，假设您使用CSS-in-JS，则可以在render函数中执行以下操作：

render () {
  const { match: { path, isExact } } = this.props
  const backgroundStyle = path === '/' && isExact === true 
    ? { backgroundColor: 'transparent' }
    : { backgroundColor: 'black' }

  const navbarStyles = {
    ...styles.navbarWrapper,
    ...backgroundStyle
  }

  return (
    <div style={navbarStyles}>
      {/* Actual NavBar content here */}
    </div>
  )
}

根据React中的页面更改导航栏背景颜色

2 个答案: