Reactjs 如何在操作后更改导航栏中的所有样式

这是我的零件。这工作做得很好，但是

我的发型有问题。 滚动后，导航栏设置状态并添加导航栏滚动至导航栏。 如何从该组件设置所有子树元素的样式。 我需要更改菜单组件中的每个元素和组件：

• 所有链接（a）和悬停
• 标志路径
• 钮扣

  export class Navbar extends Component{
      constructor(props){
          super(props);
          this.handleScroll = this.handleScroll.bind(this);
          this.state={Navbar: 'Navbar'}
        }
  
          componentDidMount() {
            window.addEventListener('scroll', this.handleScroll);
          };
  
          handleScroll() {
              let Navbar = this.state.Navbar
               this.setState( {Navbar : 'Navbar ' + 'NavbarScroll' } )
       };
  
  
      render(){
          return(
  
              <div onScroll={this.handleScroll.bind(this)} className ={this.state.Navbar}>
                  <Container>
                      <Row>
                          <Col sm={{size:3,}}>Logo</Col>
                          <Col><Menu/></Col>
                      </Row>
                  </Container>
              </div>
  
          )
      }
  }
  

  导出类导航栏扩展组件{
  建造师（道具）{
  超级（道具）；
  this.handleScroll=this.handleScroll.bind（this）；
  this.state={Navbar:'Navbar'}
  }
  componentDidMount（）{
  window.addEventListener（'scroll'，this.handleScroll）；
  };
  handleScroll（）{
  让Navbar=this.state.Navbar
  this.setState（{Navbar:'Navbar'+'NavbarScroll'}）
  };
  render（）{
  返回(
  标志
  )
  }
  }
  

---

像这样将状态传递到菜单：

<Menu navbarState={this.state.Navbar} />

如果您的菜单是按以下方式启动的非受控组件，则此示例有效

const Menu = (props) => {
} 

如果它是一个像

class Menu extends React.Component

然后你应该在道具之前添加以下内容：

<button className={this.props.navbarState} /> 

将状态作为道具传递给菜单，并在子菜单中进行检查。。并相应地应用样式。好的，我应该在handleScroll（）之后或之前通过状态？这是一个有用的答案。当Navbar有3代并且需要在菜单子项中传递状态时，我应该怎么做？我看到三个选项：1。将状态传递给所有人（最简单的解决方案）2。学习如何使用上下文3。在MenuIt中实现handleScroll（）！我怎么能表示按钮不是从Navbar Scroll类继承的呢？这很有趣，因为当我传递{this.props.navbarState}时，它是继承的，我有乘法NavbarPiotr，如果你不想有类“NavbarScroll”，那么我会用三元运算符做一些事情，比如：，如果一个状态就是“Navbar”您的按钮将有一个类“button\u navbar”，但通过Scroling，额外的“scroll”类将应用于您的按钮

class Menu extends React.Component

<button className={this.props.navbarState} />