反应组合不同的包装器

Question

我们正在 React 中启动一个新项目。 我们需要使用：

• React Context API
• i18n (react.i18nex(
• GraphQL (Apollo client(
• 雷杜克斯
• CCS-in-JS(样式组件或磷化石(

问题是，任何这种实现都包装了一个组件，并传递给它一些 props 或使用函数作为子项。

我希望我的组件尽可能解耦和清洁。

如何构建包装器？

例

家

<Home {...props} />

上下文：

<ThemeContext.Consumer>
{ theme=> <Home {...theme} programa={theme} /> }
</ThemeContext.Consumer>

i18n：

<I18n>
{t => <Home text={t("translated text")} /> }
</I18n>

图QL：

<Query query={GET_PROGRAMA}>
{({ data }) => <Home data={data} />}
</Query>

冗余：

const mapStateToProps = state => ({
user: "some user"
});

export default connect(
mapStateToProps,
)(Home);

如您所见，Home 组件从许多来源接收隔离的道具。

如何管理 ir 并保持分离？有某种作曲家吗？

谢谢！

Answer 1

我认为您可以将其转换为将为您处理所有组件包装的 HOC ：

const withWrappers = WrappedComponent => {
return class extends React.Component {
render () {
return (
<ThemeContext.Consumer>
{ theme =>
<I18n>
{ t =>
<Query query={GET_PROGRAMA}>
{ ({ data }) => 
<WrappedComponent
{...this.props}
{...theme}
programa={theme}
data={data}
text={t("translated text")}
/>
}
</Query>
}
</I18n>
}
</ThemeContext.Consumer>
)
}
}
}

用法：

class Home extends React.Component {
render () {
return (
<div>Home</div>
)
}
}
export default withWrappers(Home);

Answer 2

感谢您的帮助！你们所有人。 我已经实现了一个 HOC，就像你向我提出的那样，并将 GraphQL 组件保留在外面：

import React from "react";
import PropTypes from "prop-types";
import { mergeStyles } from "js/utils";
import { I18n } from "react-i18next";
import { TemplateContext } from "js/template-context";
const Wrapper = ({ Component, getStylesFromTemplate }) => props => {
const { classes } = props;
return (
<TemplateContext.Consumer>
{programa => {
const { template } = programa;
const stylesFromTemplate = getStylesFromTemplate(template);
const styles = mergeStyles({ classes, stylesFromTemplate });
return (
<I18n>
{(t, { i18n }) => {
return (
<Component
t={t}
styles={styles}
programa={programa}
{...props}
/>
);
}}
</I18n>
);
}}
</TemplateContext.Consumer>
);
};
Wrapper.propTypes = {
classes: PropTypes.object.isRequired
};
export default Wrapper;

再次，非常感谢！