Я изначально следил за этим проектом , чтобы добавить Firebase в приложение Gatsby React. Он включает в себя создание контекста Firebase, обертывание макета root с помощью поставщика, а затем использование withFirebase HO C для обертывания компонентов с помощью потребителя Firebase по мере необходимости. Когда я изначально это сделал, все работало нормально, но я хотел переместить код в пакет, который можно было бы повторно использовать в своих приложениях. Вот HO C
export const withFirebase = (Component) => (props) => (
<FirebaseContext.Consumer>
{(firebase) => <Component {...props} firebase={firebase} />}
</FirebaseContext.Consumer>
);
И каждая страница начинается с компонента Layout, который отображает это:
<FirebaseContext.Provider value={this.state.firebase}>
<AppWithAuthentication>
{this.props.children}
</AppWithAuthentication>
</FirebaseContext.Provider>
AppWithAuthentication
сам использует withFirebase
HO C как ему требуется Firebase для получения AuthUser (который затем сохраняется в контексте и передается через провайдер), и он может это сделать нормально.
Все вышесказанное происходит в самом коде пакета, но когда Я импортировал свой пакет в другой проект React, пытаясь использовать withFirebase
, перестает работать, поскольку любые компоненты, заключенные в него, никогда не получают обновленный контекст. Я подтверждаю это, проверяя дерево компонентов в инструментах React Dev, поставщик Firebase получает обновленное ненулевое значение, и потребитель внутри AppWithAuthentication
тоже получает его. Но потребители внутри моего фактического приложения не обновляются (и у меня такая же проблема с контекстом AuthUser, который я создал в той же библиотеке).
Я даже подумал, что, возможно, каким-то образом родительский рендеринг с обновленным потребителем но потомки не выполняли повторный рендеринг, но после подсчета рендеров и их регистрации стало ясно, что компоненты из моего приложения рендерили больше, чем AppWithAuthentication
. Чтобы было немного понятнее, вот мое дерево компонентов (начиная с компонента Layout на странице root):
Here's Provider showing a value:
Here's AppWithAuthentication
's consumer showing a value:
And here's the consumer from inside my application that doesn't have a value:
этот вопрос , который казался похожим, и попытался реализовать исправление в моем .neutrinorc.js
:
const reactComponents = require('@neutrinojs/react-components');
module.exports = {
use: [reactComponents(),
(neutrino) => {
neutrino.config.output.library("upe-react-components");
neutrino.config.output.libraryTarget("umd");
neutrino.config.mode("development");
}],
};
Но этого не произошло исправить проблему. Кто-нибудь сталкивался с проблемами с веб-пакетом, нарушающим контекст React?