Как обновить один компонент на основе обработчика событий другого компонента?

Question

В моем файле index.js есть два компонента (Header и Sidebar), как показано ниже

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import {
    BrowserRouter as Router,
    Route
} from "react-router-dom";
import './index.scss';
import './responsive.scss';
import Sidebar from './sidebar';
import Header from './header';
import Home from './home';
import Products from './products';
import Variant from './variant';
import Variety from './variety';
import * as serviceWorker from './serviceWorker';




ReactDOM.render(
    <Router>
        <div className="wrapper">
            <Header />
            <Sidebar />
            <div id="content">
                <Route exact path="/" component={Home} />
                <Route path="/products" component={Products} />
                <Route path="/variant" component={Variant} />
                <Route path="/variety" component={Variety} />
            </div>
        </div>
    </Router>
    , document.getElementById('root'));

serviceWorker.unregister();

У меня есть кнопка в моем компоненте Header, и я хочу добавить к ней обработчик события onClick, поэтомупри щелчке боковая панель в компоненте боковой панели будет переключаться.Теперь моя проблема в том, что я не могу соединить эти два компонента.Я даже пытался использовать то, что предлагается по этой ссылке Как передавать события между компонентами , но проблема в том, что событие нацелено на изменение всех элементов, определенных в дочерних компонентах.Я прочитал кое-что о createPortal (), но было предложено получить доступ к DOM вне компонента, и, поскольку я пытаюсь получить доступ к компоненту из другого, я не уверен, должен ли я это делать.Ваша помощь ценится заранее.

Answer 1

Как ответили все, это несколько хороших решений.Но вы упомянули и ваши ограничения.Вы можете попробовать ниже одного также.

let showSidebar = true;

// Function to handle toggle
const handleClick = () => {
  showSidebar = !showSidebar
  renderApp()
}

// Make renderApp function
const renderApp = () => {
 ReactDOM.render(
    <Router>
        <div className="wrapper">
            <Header handleClick={handleClick}/> // call this function onClick inside your Header component 
            { showSidebar && <Sidebar /> }      // toggle the Sidebar
            <div id="content">
                <Route exact path="/" component={Home} />
                <Route path="/products" component={Products} />
                <Route path="/variant" component={Variant} />
                <Route path="/variety" component={Variety} />
            </div>
        </div>
    </Router>
    , document.getElementById('root'));
};
renderApp(); // Call renderApp for the first time

serviceWorker.unregister();

Answer 2

Есть несколько способов.

1. Вы можете использовать Redux.
2. Использовать React Context API https://reactjs.org/docs/context.html ИЛИ

Вы можете сделать что-то вроде следующего

// IN MAIN FILE
state ={
    sidebarOpen : false
}
<header toggleSidebar = { this.toggleSidebar}  />
<sidebar  sidebarOpen = { this.state.sidebarOpen} /> 

toggleSidebar(){
    //UPDATE STATE
    this.setState({
        sidebarOpen : !(this.state.sidebarOpen)
    })
}

// IN HEADER

onButtonClick(){
    this.props.toggleSidebar()
}

IN SIDEBAR

componentWillReceiveProps(props){
    //LOGIC FOR UPDATING SIDEBAR YOU WILL RECIEVE UPDATED STATE HERE
}

Answer 3

Во-первых, просто о соединении этих двух компонентов. Передача данных в React предлагается при передаче от родительского компонента к дочернему компоненту. Это состояние подъема. Обычно, используйте обратный вызов для изменения родительского компонента заголовка и прохода. данные возвращаются на боковую панель. Теперь редукция хорошо работает с реагировать. Итак, просто установите состояние для боковой панели и свяжите функцию в onClick заголовка. И добавьте что-нибудь в onClick. Например:

<header onClick = { this.expand.bind(this)}  />
<sidebar  sidebar = { this.state.sidebar} />

Кстати, реагирование предоставляет нам несколько способов передачи данных. Например, контекст используется, когда вложение компонента является сложным, и трудно найти общий компонент-отец.

Во-вторых, «событие нацелено на изменение всех элементов, определенных в дочерних компонентах». Эта проблема из-за того, как работает реакция. Вы можете использовать shouldComponentUpdate, чтобы избежать этого. Но здесь не рекомендуется.

В-третьих, что касается React Portal, он добавлен в React v16. Он используется для визуализации дочернего компонента за пределами родительского компонента. Этот ответ хорош, если вы хотите об этом знать. Как использовать ReactDOM.createPortal ( ) в Реакте 16? . Компоненты siderbar и header находятся на одном уровне. Поэтому я не думаю, что это необходимо.

Answer 4

Для подключения компонентов вы должны использовать хранилище, чтобы делить состояние приложения между всеми компонентами.Это может сделать что-то вроде Redux или подобное.

Основная идея состоит в том, что вы изменяете состояние в компоненте Header, и боковая панель будет прослушивать это состояние и обновлять себя, если это необходимо.