Реагировать на хуки: useContext

Вот изображение демонстрационного приложения, каждый кружок представляет компонент React с отдельным стилем css. Этот блог не о css, подробности css о концентрических кругах см. Здесь. По аналогии, вложенные концентрические круги похожи на иерархическое дерево компонентов. Компонент приложения является родительским компонентом, внешний круг (синий) - дочерним по отношению к родительскому компоненту. Внешний круг имеет два внутренних круга (салатовый и желтый) или два дочерних компонента. В реакции информация передается от родителя к ребенку с помощью опор (бурение опор). С помощью React context api и теперь с React hooks useContext нам не нужно выполнять буровые работы.

css styles для всех кругов находится в файле CircleStyle, показанном ниже. Мы создаем styleContext, используя React.createContext. Экспортируем styleContext и styles

import React from "react";
export const styles = {
  outer: {
    backgroundColor: "blue",
    width: "400px",
    height: "400px",
    position: "relative",
    border: "1px solid black",
    borderRadius: "50%",
    margin: "auto",
  },
  inner1: {
    backgroundColor: "lime",
    top: "10%",
    left: "10%",
    width: "80%",
    height: "80%",
    position: "absolute",
    border: "1px solid black",
    borderRadius: "50%",
  },
  inner2: {
    backgroundColor: "yellow",
    top: "20%",
    left: "20%",
    width: "60%",
    height: "60%",
    position: "absolute",
    border: "1px solid black",
    borderRadius: "50%",
  },
};
export const styleContext = React.createContext(null);
export default { styleContext, styles };

Вот компонент приложения или родительский компонент, показанный ниже. Мы импортируем styleContext и styles. Мы передаем свойства styles дочернему компоненту (OuterCircle) и основным дочерним компонентам, используя styleContext.Provider value={styles}

import React from "react";
import OuterCircle from "./OuterCircle";
import { styleContext, styles } from "./CircleStyles";
import "./App.css";
function App() {
  return (
    <styleContext.Provider value={styles}>
      <h1>Draw Three Concentric Circles</h1>
      <OuterCircle />
    </styleContext.Provider>
  );
}
export default App;

Внутри OuterCircle находятся два внутренних круга или внутренние компоненты, показанные ниже. Каждый компонент подписывается, потребляет (данные) или получает доступ (контекст) с помощью ключевого слова useContext; astyle=useContext(styleContext). Стили css для OuterCircle доступны через astyle.outer

import React, { useContext } from "react";
import InnerCircle1 from "./InnerCircle1";
import InnerCircle2 from "./InnerCircle2";
import { styleContext } from "./CircleStyles";
function OuterCircle() {
  const astyle = useContext(styleContext);
  return (
    <div style={astyle.outer}>
      <InnerCircle1 />
      <InnerCircle2 />
    </div>
  );
}
export default OuterCircle;

вот компонент InnerCircle1, компонент InnerCircle2 аналогичен.

Мы подписываемся или потребляем styleContext данные, используя ключевое слово useContext; astyle=useContext(styleContext). Стили css для InnerCircle1 доступны через astyle.inner1

import React, { useContext } from "react";
import { styleContext } from "./CircleStyles";
function InnerCircle1() {
  const astyle = useContext(styleContext);
  return <div style={astyle.inner1}></div>;
}
export default InnerCircle1;

Пожалуйста, посмотрите мой github, чтобы найти файлы демонстрационного приложения.

Резюме

мы рассмотрели React Hooks; useContext