javascript - react 结合不同的包装器

Question

我们正在用 React 开始一个新项目。我们需要使用:

• react 上下文 API
• 国际化 (react.i18nex)
• GraphQL(Apollo 客户端)
• 终极版
• CCS-in-JS(样式组件或 aphodite)

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

而且我想保持组件解耦并尽可能清洁。

如何构建包装器？

例子

主页

<Home {...props} />

上下文:

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

国际化:

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

GraphQL:

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

终极版:

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


export default connect(
  mapStateToProps,
)(Home);

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

如何管理 ir 并使其解耦？有某种 Composer 吗？

谢谢!

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