Нажмите "меню гамбургеров" и откройте боковую навигацию в React?

Я новичок, чтобы реагировать. Пытаюсь понять, как связать событие click и заставить его переключать класс в двух местах. Как мне этого добиться?

Вот что я сделал до сих пор.

Навигатор: 

import React from 'react';
import { css } from 'glamor';
import { container } from '../contents/grid'

export default class Navigation extends React.Component {
    constructor(props) {
        super(props);
        this.state = { isToggled: true };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(prevState => ({
            isToggled: !prevState.isToggled
        }));
    }

    showHeader() {
        this.refs.navigation.show();
    }

    render() {
        return (
            <nav className={nav} {...container}>
                <ul {...hamburger} className={this.state.isToggled ? "" : "active"} onClick={this.handleClick}>
                    <li>
                    </li>
                </ul>
            </nav>
        )
    }
}

И боковое меню / заголовок: 

import React from 'react';
import { Link } from 'react-router-dom';
import { css } from 'glamor';
import { header, nav, navUL } from '../contents/navigation';

export default class Header extends React.Component {
    constructor(props) {
        super(props);
    }

    show() {
        this.setState({
            isToggled: true
        });
    }

    render() {
        return (
            <header {...header}>
                <nav {...nav}>
                    <ul {...navUL} className={styleUl}>
                        <li>
                            <Link to='/'>Robin Savemark</Link>
                        </li>
                        <li>
                            <Link to='/experience'>Erfarenhet</Link>
                        </li>
                        <li>
                            <Link to='/education'>Utbildning</Link>
                        </li>
                        <li>
                            <Link to='/project'>Projekt</Link>
                        </li>
                        <li>
                            <Link to='/knowledge'>Kunskaper</Link>
                        </li>
                        <li>
                            <Link to='/contact'>Kontakt</Link>
                        </li>
                    </ul>
                </nav>
            </header>
        )
    }
}

И приложение, в котором я только визуализирую каждый компонент: 

import React from 'react';
import Navigation from './Navigation';
import Header from './Header';
import Main from './Main';

export default class App extends React.Component {
    render() {
        return (
            <div>
                <Navigation />
                <Header ref="Navigation" />
                <Main />
            </div>
        )
    }
}

Как я могу сказать своему методу" handleClick", чтобы "переключить" меню гамбургера и заголовок / боковое меню? Потому что handleClick находится внутри другой области (навигация), и я не хочу этого чтобы сделать то же самое внутри класса заголовка.

1 2
reactjs toggle

1 ответ:

Если вы хотите, чтобы два компонента разделяли одно и то же событие / состояние, вам нужно сделать то, что в документах react называется подъем состояния

Вы можете структурировать его, как вам угодно, но прямо сейчас ваш App.js содержит ваши два компонента интереса, но не имеет собственного state. Таким образом, эти два компонента никак не могут совместно использовать состояние. То, что вы хотите сделать, - это иметь обработчик событий в App.js , который затем передается компоненту(компонентам) интереса в качестве опоры, а также имейте класс toggle, содержащийся в своем собственном состоянии.

Как только вы вызовете function, переданное в Navigation, оно скажет App.js "Эй, я только что сделал то, что вы мне сказали, вы справитесь с этим отсюда."App.js скажет: "хорошо, обновляю состояние для себя, чтобы и вы, и Header могли получить то, что вам нужно."App.js переключит свое состояние и передаст его в качестве опоры как Header, так и Navigation.

React doc ссылка здесь: https://facebook.github.io/react/docs/lifting-state-up.html#lifting-state-up

1