Я впервые настраиваю ContextApi в рабочем приложении, надеясь заменить им нашу текущую обработку конфигураций нашего приложения. Я следил за официальной документацией и консультировался с похожими проблемами, с которыми сталкиваются другие люди с API, и довел его до точки, где я могу правильно настроить конфигурацию, когда я делаю Config.Consumer и обратный вызов в функциях рендеринга. Однако я не могу заставить this.context возвращать что-либо, кроме пустого объекта.
В идеале я бы использовал this.context в методах жизненного цикла и чтобы избежать ада обратных вызовов, поэтому помощь будет оценена по достоинству. Я дважды проверил свою версию React и устанавливаю contextType. Ниже приведено представление кода
config.js
import { createContext } from "react";
export default createContext();
index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { Router, browserHistory } from "react-router";
import { syncHistoryWithStore } from "react-router-redux";
import Config from "../somePath/config";
// more imports
function init() {
const config = getConfig();
const routes = getRoutes(config);
const history = syncHistoryWithStore(browserHistory, appStore);
ReactDOM.render(
<Provider store = {appStore}>
<Config.Provider value = {config}>
<Router history = {history} routes = {routes} />
</Config.Provider>
</Provider>,
document.getElementById("app")
);
}
init();
некоторые вложенные компоненты.js
import React, { Component } from "react";
import { connect } from "react-redux";
import Config from "../somePath/config";
@connect(
state => ({
someState: state.someState,
})
)
class someNestedComponent extends Component {
componentDidMount() {
console.info(this.context);
}
render() {
return (...someJSX);
}
}
someNestedComponent.contextType = Config;
export default someNestedComponent;
В настоящее время работает на:
Проблема в том, что someNestedComponent
не относится к классу, в котором используется this.context
:
someNestedComponent.contextType = Config;
Это относится к функциональному компоненту, который обертывает исходный класс, потому что он был украшен декоратором @connect
, это синтаксический сахар для:
const someNestedComponent = connect(...)(class someNestedComponent extends Component {
...
});
someNestedComponent.contextType = Config;
Вместо этого должно быть:
@connect(...)
class someNestedComponent extends Component {
static contextType = Config;
componentDidMount() {
console.info(this.context);
}
...
}
С контекстным API нет проблем с адскими обратными вызовами; это удобно решается с помощью того же шаблона компонента более высокого порядка, который используется в React Redux, и также может быть полезен синтаксис декоратора:
const withConfig = Comp => props => (
<Config.Consumer>{config => <Comp config = {config} {...props} />}</Config.Consumer>
);
@connect(...)
@withConfig
class someNestedComponent extends Component {
componentDidMount() {
console.info(this.props.config);
}
...
}
Рад, что это помогло.
Вы не использовали consumer
для получения значений
ссылка: https://reactjs.org/docs/context.html#contextconsumer
Это был отличный ответ — он дал мне возможность обсудить с моей командой, какой подход мы предпочитаем, и в итоге мы использовали синтаксис общедоступного класса. Спасибо!