如何将 ramda 与 recompose 结合使用？答案

【问题标题】：How do I combine ramda with recompose?如何将 ramda 与 recompose 结合使用？
【发布时间】：2019-02-09 02:28:21
【问题描述】：

我有这个组件；

const ReposGrid = R.pipe(
    R.prop("repos"),
 // branch(R.isEmpty, renderComponent(Loader)),
    R.map(Repo),
    ReposWraper
)

export default ReposGrid

这很好，但如果repos 为空，我想渲染加载器组件。我来自 recompose 的branch 什么也没做。它不显示 Loader 也不显示 repos 加载时。我可以在这里申请R.ifElse吗？

【问题讨论】：

ReposGrid 是高阶组件还是组件本身？你能提供ReposWraper（顺便说一句错字）和ReposGrid的最小例子吗？

标签： reactjs ramda.js recompose

【解决方案1】：

您可能会混淆 ramda 的 pipe/compose 和 recompose 的，以及它们采用的参数。你的链由高阶组件和在 props 上运行的函数组成。数据处理最好保持在mapProps/withProps等中。

您也许可以实现类似于您所追求的目标：

import { map, evolve, propSatisfies, isEmpty } from 'ramda'
import { compose, branch, renderComponent, mapProps, renameProp } from 'recompose'

const Repo = (repo) => <div>Repo {repo}</div>
const Loader = () => <div>Loader</div>
const RepoGridBase = props => <div>{props.children}</div>

const ReposGrid = compose(
    branch(
      propSatisfies(isEmpty, 'repos'),
      renderComponent(Loader),
    ),
    mapProps(evolve({
      repos: map(Repo)
    })),
    renameProp('repos', 'children')
)(RepoGridBase)

function App() {
  return (
    <div className="App">
      <ReposGrid repos={[]} />
      <ReposGrid repos={['one', 'two']} />
    </div>
  );
}

（这将引发关键警告，您最好在组件内明确地执行map）

codesandbox link

【讨论】：