Как изменить все стили в Navbar после действий - PullRequest
Новая
       8

Как изменить все стили в Navbar после действий

0 голосов
/ 28 августа 2018

Это мой компонент. Это работает довольно хорошо, но.

У меня проблема со стайлингом. После прокрутки, навигационная панель setState и добавьте NavbarScroll к Navbar. Как я могу стилизовать все элементы поддерева из этого компонента. Мне нужно изменить, все элементы и компоненты из компонента меню:

  • все ссылки (а) и зависания
  • Путь к логотипу 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>

        )
    }
}

1 Ответ

0 голосов
/ 28 августа 2018

Передать состояние в меню следующим образом: 

<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} />
...