时间戳

首页 > 解决方案 > 在 React 中，是否可以在上下文中存储 ref？

html - 在 React 中，是否可以在上下文中存储 ref？

问题描述

我需要对 VideoElement 的全局应用程序范围的访问，以便在 Safari 等浏览器上的用户事件上播放它，并且想知道将 VideoElement 存储在上下文中是否是最好的方法。我通过 redux 操作和在 Safari 中以编程方式播放我的视频，除非它通过用户触发的事件（如点击）播放过一次，否则这是不可能的

是否可以在上下文中存储元素（参考）？然后 VideoElement 将在我想要拥有我的视频的组件中呈现，然后其他组件也将可以访问上下文并能够调用诸如usePlayVideo基于上下文状态的函数，或者调用 videoElement.play( ) 如果这是第一次播放视频，或者调度 redux 操作以编程方式播放视频，否则

标签： htmlreactjs

解决方案

可以将 ref 存储到上下文中！您首先需要创建一个上下文。然后你需要将值传递给上下文提供者并使用 useRef 钩子创建一个 ref 对象。之后，您将 ref 传递给值。

现在，您在上下文提供程序下的组件之间共享了一个 ref 对象，如果您想检索或传递一个新的 ref，您可以使用 useContext 钩子来处理它。

这是演示（codesandbox）。

这是示例代码。

import { createContext, useContext, useEffect, useRef, useState } from "react";
import "./styles.css";

const MyContext = createContext();

export const ContextStore = (props) => {
  const ref = useRef();
  return <MyContext.Provider value={ref}>{props.children}</MyContext.Provider>;
};

export default function App() {
  return (
    <>
      <ContextStore>
        <MyComponent />
        <MyComponent2 />
      </ContextStore>
    </>
  );
}

const MyComponent = () => {
  const myContext = useContext(MyContext);

  return (
    <div className="App" ref={myContext}>
      <h1>Hello MyComponent1</h1>
    </div>
  );
};

const MyComponent2 = () => {
  const myContext = useContext(MyContext);
  const [divRef, setDivRef] = useState();
  useEffect(() => {
    setDivRef(myContext);
  }, [myContext]);

  return (
    <div className="App">
      <h1>{divRef?.current && divRef.current.innerText}</h1>
    </div>
  );
};

推荐阅读