从旧的 Context API 提供程序实现中获取 React Context

Question

我在 React 中使用一个 library，它使用 legacy context API 实现了一个提供者。

这是实现：

import { Component, Children } from "react";
import PropTypes from "prop-types";
import Registry from "./registry";

class ConduitProvider extends Component {
  constructor(props) {
    super(props);
    const { registry } = this.props;

    this.registry = registry ? registry : new Registry();
  }

  getChildContext() {
    return { registry: this.registry };
  }

  render() {
    return Children.only(this.props.children);
  }
}

ConduitProvider.childContextTypes = {
  registry: PropTypes.object.isRequired,
};

export default ConduitProvider;

有没有一种方法可以将提供者转换为您可以通过 React 中的 nowadays context 挂钩获得的上下文？你会得到的那个

const MyContext = React.createContext(defaultValue);

我有一个组件需要转发内部使用的所有上下文，我正在尝试使用内部使用该库的不同组件。

我已经尝试过将组件的内容包装在

Provider

中，但这行不通，因为组件需要上下文。 我还尝试以多种方式创建上下文。最乐观的是使用库中的

Registry

创建一个新的提供者，但我无法让它工作。

Answer 1

Edit：我没有意识到 transform 你不是指代码，而是消费和重新提供。从理论上讲，您只需执行以下操作，但您的

ConduitProvider

也会采用遗留的

context

参数。通常情况下，分叉和升级库是一个更好的主意，这样你就不会被 React 的过时版本所束缚，但是由于这个特性是 React (Portals) 的原生特性，所以你根本不需要库。

---

上下文本身没有太多要重写的，但是您必须更新所有孩子以现代方式使用上下文（理想情况下

useContext

）。

export const ConduitContext = React.createContext({})

export const ConduitProvider = ({ registry, ...rest }) => {
  const [registry, setRegistry] = useState(registry || new Registry())

  return (
    <ConduitContext.Provider value={registry} {...rest} />
  )
}

export const useRegistry = () => React.useContext(RegistryContext)

然后您将使用提供者组件包装您的组件：

() => (
  <ConduitProvider registry={someValueIfAvailable}>
    {/* Your components */}
  </ConduitProvider>
)

然后你的组件会做这样的事情：

const Foo = () => {
  const registry = useRegistry()

  // ...
}