😁React Context với TypeScript: Phần 1 - Ngữ cảnh đơn giản với các thành phần hàm

https://www.carlrippon.com/react-context-with-typescript-p1/

src\App.tsx

import React, { createContext, ReactNode, useState, useContext } from 'react';
// Step 1 Tạo bối cảnh
const defaultTheme = "white";
const ThemeContext = createContext(defaultTheme);
// Step 2 Tạo nhà cung cấp ngữ cảnh
type Props = {
  children: ReactNode;
};
export const ThemeProvider = ({ children }: Props) => {
  const [theme, setTheme] = useState(defaultTheme);
  React.useEffect(() => {
    const currentTheme = "lightblue";
    setTheme(currentTheme);
  }, []);
  return (
    <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
  );
};
// Step 3 Tạo một hook tùy chỉnh để sử dụng ngữ cảnh
const useTheme = () => useContext(ThemeContext);
// Step 4 Thêm nhà cung cấp vào cây thành phần
const Header = () => {
  const theme = useTheme();
  return <div style={{ backgroundColor: theme }}>Hello!</div>;
};
function App() {
  return (
    <ThemeProvider>
      <Header />
    </ThemeProvider>
  );
}
export default App;

Part 1

const themeContext = createContext(defaultTheme);
console.log(themeContext);

React context cho phép nhiều thành phần trong một cây chia sẻ một số dữ liệu. Thuận tiện hơn so với việc truyền dữ liệu qua props xuống cây thành phần. Làm thế nào chúng ta có thể sử dụng TypeScript để tạo một ngữ cảnh được gõ mạnh? Có thể thực hiện điều này để sử dụng với các thành phần hàm cũng như các thành phần lớp không? Đây là bài đăng đầu tiên trong bốn bài đăng trên blog đề cập đến chủ đề này.

Phần 1 - Ngữ cảnh đơn giản với các thành phần chức năng (bài đăng này)
Phần 2 - Bối cảnh phức tạp với các thành phần chức năng
Phần 3 - Bối cảnh với các thành phần lớp
Phần 4 - Tạo ngữ cảnh không có kiểm tra mặc định và không có kiểm tra không xác định

Trong bài viết này, chúng ta sẽ tạo một ngữ cảnh React có kiểu dữ liệu mạnh và sử dụng nó trong một thành phần hàm mà không làm thay đổi ngữ cảnh.

Tạo bối cảnh

Một trường hợp sử dụng phổ biến khi sử dụng ngữ cảnh là cung cấp thông tin chủ đề cho các thành phần trong ứng dụng. Chúng ta sẽ cung cấp giá trị màu trong ngữ cảnh mà các thành phần có thể sử dụng.

Hãy bắt đầu bằng cách tạo chủ đề của chúng ta bằng createContexthàm Reacts:

const defaultTheme = "white";
const ThemeContext = React.createContext(
  defaultTheme
);

Chúng tôi được yêu cầu cung cấp giá trị mặc định cho ngữ cảnh, trong trường hợp của chúng tôi là "white".

Loại ngữ cảnh được suy ra là React.Context<string>:

Tuyệt vời - đúng như chúng tôi yêu cầu!

Tạo nhà cung cấp ngữ cảnh

Tiếp theo, chúng ta sẽ tạo thành phần nhà cung cấp:

type Props = {
  children: React.ReactNode
};
export const ThemeProvider = ({
  children
}: Props) => {
  const [theme, setTheme] = React.useState(
    defaultTheme
  );

  React.useEffect(() => {
    // We'd get the theme from a web API / local storage in a real app
    // We've hardcoded the theme in our example
    const currentTheme = "lightblue";
    setTheme(currentTheme);
  }, []);

  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  );
};

Chúng tôi giữ giá trị chủ đề trong trạng thái. Điều này có nghĩa là khi nó thay đổi, React sẽ tự động render lại các con của nhà cung cấp với chủ đề mới.

Chúng ta lấy giá trị chủ đề hiện tại bằng cách sử dụng React useEffecthook và cập nhật themegiá trị trạng thái.

Thành phần cung cấp chủ đề của chúng tôi trả về Providerthành phần trong ngữ cảnh với giá trị chủ đề của chúng tôi. Nhà cung cấp được bao bọc xung quanh tất cả các thành phần con trong cây thành phần.

Tạo một hook tùy chỉnh để sử dụng ngữ cảnh

Chúng ta có thể tạo một hook tùy chỉnh cho phép các thành phần hàm sử dụng ngữ cảnh của chúng ta:

export const useTheme = () =>
  React.useContext(ThemeContext);

Hãy kiểm tra xem kiểu trả về useThemeđã được suy ra là gì:

Kiểu trả về useThemelà stringvì đây là kiểu của giá trị ngữ cảnh.

Thêm nhà cung cấp vào cây thành phần

Bây giờ thành ThemeProviderphần có thể được đặt ở vị trí thích hợp trong cây thành phần.

const App = () => (
  <ThemeProvider>
    <Header />
  </ThemeProvider>
);

Các thành phần bên dưới nó sẽ có quyền truy cập vào ngữ cảnh, nhưng các thành phần bên trên nó thì không. Vì vậy, Headerthành phần sẽ có quyền truy cập vào ngữ cảnh.

Tiêu thụ bối cảnh

Thành Headerphần có thể truy cập ngữ cảnh bằng cách sử dụng useThemehook chúng ta đã tạo. Điều này cho phép thành phần tiêu đề hiển thị một phần tử có màu nền được đặt thành màu chủ đề:

const Header = () => {
  const theme = useTheme();
  return (
    <div style={{ backgroundColor: theme }}>
      Hello!
    </div>
  );
};

Phiên bản đang hoạt động ThemeContextcó sẵn bằng cách nhấp vào liên kết bên dưới. Khi ứng dụng được chạy, Hello sẽ xuất hiện với nền màu xanh nhạt.

Phiên bản làm việc mở

Kết thúc

Kiểu cho ngữ cảnh được suy ra chính xác nếu một giá trị mặc định hợp lý được cung cấp khi nó được tạo. Nếu ngữ cảnh cung cấp các giá trị mà người dùng không thay đổi, thì điều này là ổn. Tuy nhiên, nếu chúng ta muốn người dùng thay đổi chủ đề thì sao? Trong trường hợp này, ngữ cảnh của chúng ta sẽ cần cung cấp một hàm để cập nhật chủ đề và không thể cung cấp hàm này làm giá trị mặc định. Trong bài đăng tiếp theo , chúng ta sẽ mở rộng ngữ cảnh chủ đề của mình để người dùng có thể cập nhật giá trị.

Previous=== START React Context với TypeScript ===NextReact Context với TypeScript: Phần 2 - Bối cảnh phức tạp với các thành phần hàm

Last updated 1 month ago

Was this helpful?

import React, { createContext, ReactNode, useState, useContext } from 'react'; // Step 1 Tạo bối cảnh const defaultTheme = "white"; const ThemeContext = createContext(defaultTheme); // Step 2 Tạo nhà cung cấp ngữ cảnh type Props = { children: ReactNode; }; export const ThemeProvider = ({ children }: Props) => { const [theme, setTheme] = useState(defaultTheme); React.useEffect(() => { const currentTheme = "lightblue"; setTheme(currentTheme); }, []); return ( <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider> ); }; // Step 3 Tạo một hook tùy chỉnh để sử dụng ngữ cảnh const useTheme = () => useContext(ThemeContext); // Step 4 Thêm nhà cung cấp vào cây thành phần const Header = () => { const theme = useTheme(); return <div style={{ backgroundColor: theme }}>Hello!</div>; }; function App() { return ( <ThemeProvider> <Header /> </ThemeProvider> ); } export default App;

type Props = { children: React.ReactNode }; export const ThemeProvider = ({ children }: Props) => { const [theme, setTheme] = React.useState( defaultTheme ); React.useEffect(() => { // We'd get the theme from a web API / local storage in a real app // We've hardcoded the theme in our example const currentTheme = "lightblue"; setTheme(currentTheme); }, []); return ( <ThemeContext.Provider value={theme}> {children} </ThemeContext.Provider> ); };