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

lawou6xi 于 2023-02-22 发布在 React

关注(0)|答案(1)|浏览(153)

我在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创建一个新的提供程序，但无法使其工作。

reactjs

来源：https://stackoverflow.com/questions/75511597/get-the-react-context-from-legacy-context-api-provider-implementation

1条答案

按热度按时间

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()

  // ...
}

赞(0）回复(0）举报 2023-02-22

我来回答

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

1条答案

相关问题

热门标签

最新问答