Question

这是我的组成部分。工作正常，但是。

我在样式方面有问题。滚动后，导航栏setState并将NavbarScroll添加到Navbar。如何为该组件中的所有子树元素设置样式。我需要更改菜单组件中的每个元素和组件：

所有链接（a）和悬停
徽标路径img

按钮

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>

        )
    }
}

Answer 1

将状态传递给菜单，如下所示：

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

然后在菜单组件中说出按钮的作用：

<button className={props.navbarState} />

这将添加一个适当的类，以便您可以在CSS中进一步使用它：

button.Navbar {
   styles for normal navbar
}

button.Navbar.NavbarScroll {
   styles for scrolled navbar
}

如果您的菜单是不受控制的组件，以

开头，则此示例有效

const Menu = (props) => {
}

如果它是

之类的类

class Menu extends React.Component

然后您应该在道具之前添加它：

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

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

1 个答案: