React Con­text API

Um „pro­per­ty dril­ling”, also das Durch­schlei­fen von Pro­per­ties durch meh­re­re Ebe­nen von Com­pon­ents, zu ver­mei­den, kann die React Con­text API benutzt werden.

In der Kom­po­nen­te, die die Pro­per­ties erzeugt, wird ein Con­text generiert:

import { createContext } from 'react';
import { useContext } from 'react';
import { useState } from 'react';

export const someContext = createContext();

const SomeComponent = () => {
  const [someVar, setSomeVar] =
    useState({ someName: 'someValue' });
  const someFunction = () => {
    console.log('someFunction called');
  };
  return (
    <someContext.Provider value={{ someVar, someFunction }}>
      <div>
        <h5>Some Header</h5>
        <SomeComponentInBetween />
      </div>
    </someContext.Provider>
  );
};
export default SomeComponent;

Im Context.Provider kann ein Value defi­niert wer­den, dass belie­bi­ge Inhal­te auf­neh­men kann, z.B. ein Object mit ver­schie­de­nen Properties.

Der mit crea­te­Con­text erzeug­te Con­text wird expor­tiert, um ihn spä­ter in der Kom­po­nen­te „Other­Com­po­nent”, die unter­halb der Kom­po­nen­te „Some­Com­po­nen­tIn­Bet­ween” (hier nicht dar­ge­stellt) defi­niert wird, zu importieren:

import { useContext } from 'react';
import { someContext } from './SomeComponent';

const OtherComponent = () => {
  const { someVar, someFunction } = useContext(someContext);
  return (
    <div>
      <p>{someVar}</p>
      <button type='button' onClick={someFunction}>
        call some function
      </button>
    </div>
  );
};
export default UserContainer;

Damit ste­hen die in der über­ge­ord­ne­ten Kom­po­nen­te als value im Con­text-Pro­vi­der defi­nier­ten Pro­per­ties in der nach­ge­ord­ne­ten Kom­po­nen­te zur Ver­fü­gung, ohne dass sie durch alle Ebe­nen dazwi­schen geschleift wer­den müssen.