반응에서 컨텍스트의 사용법은 무엇입니까

React에서 컨텍스트는 데이터를 공유하는 데 사용되며 데이터가 여러 세대에 걸쳐 전달될 수 있도록 합니다. 컨텍스트는 구성 요소 트리를 계층별로 명시적으로 전달하지 않고도 구성 요소 간에 데이터를 공유하는 새로운 방법을 제공하므로 많은 사용을 피할 수 있습니다. 값을 전달하기 위해 반복되는 소품.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

반응에서 컨텍스트의 사용법은 무엇입니까?

컨텍스트는 구성 요소 간에 데이터를 공유하는 새로운 방법을 제공하여 구성 요소 트리를 통해 계층별로 소품을 명시적으로 전달할 필요 없이 여러 세대에 걸쳐 데이터를 전달할 수 있습니다.

Context는 구성 요소 트리의 각 수준을 통해 props를 명시적으로 전달하지 않고도 구성 요소 간에 값을 공유하는 방법을 제공합니다. 값을 얻는 단계와 사용하는 단계가 멀거나, 이 값을 사용해야 하는 컴포넌트가 많고 분산되어 있는 경우 Context를 사용하여 데이터를 공유하고 값을 전달하기 위해 많은 수의 반복되는 prop을 사용하는 것을 피할 수 있습니다. 하나의 컴포넌트만 이 값을 사용해야 하는 경우 값이 생성된 위치에 컴포넌트를 생성한 다음 props를 사용하여 컴포넌트가 실제로 표시되는 위치에 레이어별로 전달하면 됩니다.

기본 사용법

1. Custom Context

import React from 'react';
 
const ThemeContext = React.createContext('light');
 
export default ThemeContext;

위 코드는 ThemeContext를 정의하며 기본값은 'light'입니다.

2. 필요한 곳에 Context Provider를 사용하세요

import ThemeContext from './context/ThemeContext.js';
import ThemedButton from './ThemedButton.js';
import './App.css';
 
function App() {
  return (
    <ThemeContext.Provider value=&#39;dark&#39;>
      <div className="App">
        <header className="App-header">
          <ThemedButton />
        </header>
      </div>
    </ThemeContext.Provider>
  );
}
 
export default App;

구성 요소의 가장 바깥쪽 레이어에서 사용자 정의 Context Provider를 사용하고 값을 전달하여 기본값을 덮어씁니다. 그 후 하위에서 읽은 ThemeContext의 값을 덮어씁니다. -컴포넌트는 기본값 'light' 대신 'dark'입니다. Provider에 값 정의가 있는 경우 값의 값이 사용됩니다(값이 정의되지 않은 경우, 즉 값이 전달되지 않은 경우에도). 정의의 기본값은 Provider가 제공하지 않는 경우에만 사용됩니다. 그것.

3. contextType을 정의하고 얻은 Context의 값을 사용합니다.

import React, { Component } from 'react';
import ThemeContext from "./context/ThemeContext.js";
 
class ThemedButton extends Component {
static contextType = ThemeContext;
render() {
return <button>{this.context}</button>;
}
}
 
export default ThemedButton;

ThemedButton은 contextType이 ThemeContext라고 선언하므로 this.context의 값은 가장 가까운 ThemeContext에서 제공하는 값인 'light'입니다.

렌더링:

추천 학습: "react 비디오 튜토리얼"

위 내용은 반응에서 컨텍스트의 사용법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!