reactjs 从旧版上下文API提供程序实现中获取React上下文

lawou6xi  于 2023-02-22  发布在  React
关注(0)|答案(1)|浏览(146)

我在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);

我有一个组件,它需要转发所有的上下文使用内,我试图使用一个不同的组件内使用的库。
我已经尝试过将组件的内容 Package 在Provider中,但由于组件需要上下文,所以无法工作。我还尝试过用多种方法创建上下文。最乐观的方法是使用库中的Registry创建一个新的提供程序,但无法使其工作。

qvtsj1bj

qvtsj1bj1#

    • 编辑**:我没有意识到 * 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)

然后,您可以使用提供程序组件 Package 您的组件:

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

然后,您的组件将执行以下操作:

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

  // ...
}

相关问题