React Native：调用导出函数来更改其他组件中的 useState 变量

Question

如果我想从 A.tsx 文件调用导出函数 (incomingNotification) 到另一个 B.tsx（在组件调用之外）。在组件A中，当用户调用函数incomingNotification时，通过setNewNotification设置一个名为newNotification的反应状态。请记住，(newNotification 和 setNewNotification) useState 位于组件 B 中。我该如何实现它？

我认为 useContext 可以解决这个问题，但是如何解决？！

Answer 1

您可以通过多种方式在组件之间进行通信，您可以直接使用 PropDrilling 概念来完成，您可以使用自定义 Hook 或使用 ContextApi。

示例1（螺旋钻探）： 您可以传递状态和函数以通过组件属性更新状态。如果组件 A 和 B 是同级组件，并且您有一个包装它们的父组件，则可以将状态保留在父组件中并将其传递给 A 和 B。

家长

import React, { useState } from 'react';
import A from './A';
import B from './B';

const ParentComponent: React.FC = () => {
  const [newNotification, setNewNotification] = useState<any>(null);

  return (
    <div>
      <A setNewNotification={setNewNotification} />
      <B newNotification={newNotification} />
    </div>
  );
};

export default ParentComponent;

A.tsx

import React from 'react';

type AProps = {
  setNewNotification: React.Dispatch<React.SetStateAction<any>>;
};

const A: React.FC<AProps> = ({ setNewNotification }) => {
  const handleNotification = () => {
    setNewNotification({ message: 'New notification!' });
  };

  return (
    <div>
      <button onClick={handleNotification}>Notify</button>
    </div>
  );
};

export default A;

B.tsx

import React from 'react';

type BProps = {
  newNotification: any;
};

const B: React.FC<BProps> = ({ newNotification }) => {
  return (
    <div>
      {newNotification && <div>{newNotification.message}</div>}
    </div>
  );
};

export default B;

示例2（自定义Hook）：

您可以创建自定义挂钩来管理共享状态。如果您正在处理简单的全局状态并且不需要将更新函数传递给许多不同的组件，那么这很有效。

useNotification.ts

import { useState } from 'react';
    export const useNotification = () => {
      const [newNotification, setNewNotification] = useState<any>(null);
    
      return { newNotification, setNewNotification };
    };

A.tsx

import React from 'react';
import { useNotification } from './useNotification';

const A: React.FC = () => {
  const { setNewNotification } = useNotification();

  const handleNotification = () => {
    setNewNotification({ message: 'New notification!' });
  };

  return (
    <div>
      <button onClick={handleNotification}>Notify</button>
    </div>
  );
};

export default A;

B.tsx

import React from 'react';
import { useNotification } from './useNotification';

const B: React.FC = () => {
  const { newNotification } = useNotification();

  return (
    <div>
      {newNotification && <div>{newNotification.message}</div>}
    </div>
  );
};

导出默认B；

示例3（ConextApi）： 您可以使用 useContext 在不同组件之间共享状态，这有点复杂，但我会给您一个示例，您可以进一步研究一下：

首先，创建一个NotificationContext.tsx 文件，在其中定义上下文和提供程序：

import React, { createContext, ReactNode, useState, useEffect } from 'react';

type NotificationContextProps = {
  children: ReactNode;
};

type NotificationContextType = {
  newNotification: any;
  setNewNotification: (newState: any) => void;
};

const initialValue = {
  newNotification: null,
  setNewNotification: () => {},
};

export const NotificationContext = createContext<NotificationContextType>(initialValue);

export const NotificationProvider = ({ children }: NotificationContextProps) => {
  const [newNotification, setNewNotification] = useState(initialValue.newNotification);

  return (
    <NotificationContext.Provider value={{ newNotification, setNewNotification }}>
      {children}
    </NotificationContext.Provider>
  );
};

在应用程序的入口点，使用NotificationProvider 包装您的组件：

应用程序.tsx

import React from 'react';
import { NotificationProvider } from './NotificationContext';
import A from './A';
import B from './B';

const App: React.FC = () => {
  return (
    <NotificationProvider>
      <A />
      <B />
    </NotificationProvider>
  );
};

export default App;

在组件A中，可以使用useNotification来访问和设置状态： A.tsx

import React from 'react';
import { useNotification } from './NotificationContext';

const A: React.FC = () => {
  const { setNewNotification } = useNotification();

  const handleNotification = () => {
    setNewNotification({ message: 'New notification!' });
  };

  return (
    <div>
      <button onClick={handleNotification}>Notify</button>
    </div>
  );
};

export default A;

在组件B中，可以访问更新后的状态：

B.tsx

import React from 'react';
import { useNotification } from './NotificationContext';

const B: React.FC = () => {
  const { newNotification } = useNotification();

  return (
    <div>
      <div>{newNotification.message}</div>}
    </div>
  );
};

export default B;