javascript - React Context API 无法在自定义 NPM 组件库中工作

Question

我构建了一个 ReactJS 组件库，用于使用 sim 链接通过 NPM 包安装的多个项目。我想使用上下文 API 将数据从组件库提供的父组件传递到我的基础项目，以便由也从组件库提供的多个使用者组件使用。当我尝试时，子组件中的上下文始终未定义。

如果我将我的消费者组件放置在我的库中的提供者组件中，它会像冠军一样工作，但这会破坏我想要实现的目标。如果我将提供者和消费者都导出到我的基础项目，消费者将看不到提供者。

这是来 self 的基础项目

import { Screen, COD, GenericSocketServer } from 'component-library'

export default class View extends React.PureComponent {
  render() {
    return (
      <Screen className="screen odmb1">
        <GenericSocketServer>
          <COD />
        </GenericSocketServer>
      </Screen>
    )
  }
}

这是从我的“组件库”导出的提供程序代码

import React from 'react';
import MyContext from "./context";
import COD from './../cod';

export default class GenericSocketServer extends React.Component {
  render() {
    return (
      <MyContext.Provider value={{ foo: 'bar' }}>
        <COD />
        {this.props.children}
      </MyContext.Provider>
    );
  }
}

这是我在“组件库”中使用的内容代码

import React from 'react'
const MyContext = React.createContext()
export default MyContext

这是我从“组件库”导出的消费者组件

import MyContext from "../GenericSocketServer/context"

class COD extends React.Component {
  render() {
    return (
      <React.Fragment>
        <MyContext.Consumer>
          {(context) => { 
            /*
               context comes back undefined 
               I expect { foo: 'bar' }
            */
            console.log('context :', context)
            return (
              <p>This should work</p>
          )}}
        </MyContext.Consumer>
      </React.Fragment>
    )
  }
}

上下文总是返回未定义的状态，就好像它没有看到父提供者一样。我认为我自己在初始化上下文时做错了什么，或者由于某种原因我导入的两个组件不共享相同的上下文。请帮忙!!不确定我是否应该放弃这个而只使用 redux。

Answer 1

也许您正在创建提供上下文的组件的多个实例。假设您有一个 Sound 组件，其开头为:

    const { Provider, Consumer } = React.createContext();

如果您从主项目导入此库，则将在全局空间中创建上下文。然后，您可以使用它来渲染文档树。但在另一个组件中，您还导入了这个库，该库必须在 webpack 转译过程中解决。因此，它拥有上述行的自己的副本以及在其自己的空间中创建的上下文对象。当您尝试使用 Consumer 时，就会出现问题，因为 Provider 仅由主项目为第一个上下文对象创建，而第二个上下文的提供程序实例从未实例化，因此返回未定义。

问题的解决方案是强制执行单个上下文对象，您可以通过告诉第二个组件的 webpack 提供者拥有的库是外部库来实现这一点，因此当 webpack 到达例如“导入声音”行，它不会进一步，并假设此依赖性在运行时已解决。当运行时到来时，它将从主项目获取它的同一位置获取它。要在 webpack 中执行此操作，例如对于上面的“声音”库，将其添加到您的其他组件(不是主项目):

{
   ...
   externals: {
      ...
      'sound': 'sound'
   }
   ...
}

也在您的组件 package.json 中:

{
   ...
   peerDependencies: {
     "sound": "^1.2.3"
   }
}