Как разделить состояние между дочерними компонентами (братьями и сестрами) в ReactJS?

How to pass state (such as isDropdownOpened) from Header to Navigation and AnotherComponent, please ?

Вы храните состояние в предке Header и передаете это состояние в Haeader, Navigation и AnotherComponent в качестве свойств. См. Состояние и жизненный цикл и Поднятие состояния вверх в документации.

Пример:

const Header = props => (
    <div>
        <span>Header: </span>
        {props.isDropdownOpened ? "Open" : "Closed"}
    </div>
);

const Navigation = props => (
    <div>
        <span>Navigation: </span>
        {props.isDropdownOpened ? "Open" : "Closed"}
    </div>
);

const AnotherComponent = props => (
    <div>
        <span>AnotherComponent: </span>
        {props.isDropdownOpened ? "Open" : "Closed"}
    </div>
);

class Wrapper extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          isDropdownOpened: false
        };
    }
    componentDidMount() {
        setInterval(() => {
            this.setState(({isDropdownOpened}) => {
                isDropdownOpened = !isDropdownOpened;
                return {isDropdownOpened};
            });
        }, 1200);
    }
    render() {
        const {isDropdownOpened} = this.state;
        return (
            <div>
              <Header isDropdownOpened = {isDropdownOpened} />
              <Navigation isDropdownOpened = {isDropdownOpened} />
              <div>
                 <div>
                     <div>
                          <AnotherComponent isDropdownOpened = {isDropdownOpened} />
                     </div>
                 </div>
              </div>
          </div>
        );
    }
}

ReactDOM.render(
    <Wrapper />,
    document.getElementById("root")
);

<div id = "root"></div>

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Есть и другие опции, которые Арно полезно предоставляет в его ответ.

У вас есть разные подходы к решению этой ситуации.

• Сохраните состояние в верхнем компоненте и передайте его детям через props
• Используйте контейнер состояния, чтобы сохранять и делиться состоянием вашего приложения между компонентами (например, https://redux.js.org/)
• Используйте новую функцию Реагировать на контекст. Контекст предоставляет способ передавать данные через дерево компонентов без необходимости передавать реквизиты вручную на каждом уровне.

Например, как сказал TJ, используйте состояние родительского компонента. Таким образом, все подкомпоненты разделяют одно состояние, что, как я полагаю, вы и хотели.

class ExampleParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        isDropdownOpened: false
    }
  }

  toggleDropdown() {
    this.setState({
        isDropdownOpened: !isDropdownOpened
    });
  }

  render() {
    return (
        <div>
          <Header open = {isDropdownOpened} toggleDropdown = { this.toggleDropdown }/>
          <Navigation open = { isDropdownOpened}/>
          <div>
             <div>
                 <div>
                      <AnotherComponent open = { isDropdownOpened} />
                 </div>
             </div>
          </div>
        </div>
    );
}


class Header extends React.Component {
    render() {
        return (
            <div>
                <button onClick = { this.props.toggleDropdown }>TOGGLE ME</button>
                { isDropdownOpened && (
                    <h1> DROPPED </h1>
                }
            </div>
        );
    }
}

Это точная причина, по которой были разработаны (и раскручены сообществом ?) "Реагировать на хуки", но не используйте их еще в производстве, они все еще находятся на ранней стадии разработки (альфа), и их спецификация / реализация могут быть изменены!

Проблему можно решить с помощью замечательного API «Реагировать на контекст», который позволяет передавать данные компонентам независимо от того, насколько глубоко они вложены в дерево. Чтобы познакомиться с контекстом, прочтите обширную документацию по ссылке выше. Я объясню здесь лишь небольшой и быстрый пример:

1. Создайте компонент контекста и экспортируйте потребителя

App.jsx

import React from "react";

// The initial value can be anything, e.g. primitives, object, function,
// components, whatever...
// Note that this is not required, but prevebents errors and can be used as
// fallback value.
const MyContext = React.createContext("anything");

// This component is the so called "consumer" that'll provide the values passed
// to the context component. This is not necessary, but simplifies the usage and
// hides the underlying implementation.
const MyContextConsumer = MyContext.Consumer;

const someData = { title: "Hello World" };

const App = ({ children }) => (
  <MyContext.Provider value = {someData}>{children}</MyContext.Provider>
);

export { MyContextConsumer };
export default App;

2. Импортируйте созданного потребителя в любой компонент и используйте предоставленное значение

AnotherComponent.jsx

import React from "react";
import { MyContextConsumer } from "./App";

const AnotherComponent = () => (
  <div>
    <MyContextConsumer>{({ title }) => <h1>{title}</h1>}</MyContextConsumer>
  </div>
);

export default AnotherComponent;

3. Визуализируйте приложение с обоими компонентами контекста

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";
import AnotherComponent from "./AnotherComponent";

const Root = () => (
  <App>
    <AnotherComponent />
  </App>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<Root />, rootElement);

Компонент отобразит заголовок уровня 1 с текстом «Hello World».

First Send the data from the first child to the common parent using callback 
function and then send that received data (stored in state in parent component)
to the second child as props.

вы также можете прочитать эту статью - https://www.pluralsight.com/guides/react-communicating-between-components

Вы можете использовать только this.state.variableName для доступа

<ChildComponent data = {this.state.name} />

И передать функции

<ChildComponent data = {this.HandleChange} />