Javascript 混合不同的包装纸

我们正在北京开始一个新项目。 我们需要使用：

• 反应上下文API
• i18n（react.i18nex）
• GraphQL（阿波罗客户端）
• 重演
• JS中的CCS（样式化组件或aphodite）

问题是，这些实现中的任何一个都包装了一个组件，并将一些道具传递给它，或者将函数作为子级使用

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

我如何构造包装纸

例子 家

如您所见，Home组件从许多来源接收独立的道具

如何管理ir并保持其解耦？有什么作曲家吗

---

谢谢大家!

我认为您可以将其转换为一个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>
      )
    }
  }
}

constwithwrappers=WrappedComponent=>{
返回类扩展了React.Component{
渲染（）{
返回(
{主题=>
{t=>
{（{data}）=>
}
}
}
)
}
}
}

用法：

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

export default withWrappers(Home);

class Home扩展了React.Component{
渲染（）{
返回(
家
)
}
}
使用包装器导出默认值（主）；

谢谢您的帮助！你们所有人。 我已经实现了一个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;

从“React”导入React；
从“道具类型”导入道具类型；
从“js/utils”导入{mergeStyles}；
从“react-i18next”导入{I18n}；
从“js/template-context”导入{TemplateContext}；
常量包装器=（{Component，getStylesFromTemplate}）=>props=>{
常量{classes}=props；
返回(
{programa=>{
const{template}=programa；
const stylesFromTemplate=getStylesFromTemplate（模板）；
constyles=mergeStyles（{classes，stylesFromTemplate}）；
返回(
{（t，{i18n}）=>{
返回(
);
}}
);
}}
);
};
Wrapper.propTypes={
类：PropTypes.object.isRequired
};
导出默认包装器；

---

再次感谢你

您可能会感兴趣！非常感谢。我认为这是目前最好的办法。再次感谢你！
<Query query={GET_PROGRAMA}>
  {({ data }) => <Home data={data} />}
</Query>

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


export default connect(
  mapStateToProps,
)(Home);

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

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;