Question

我有这个组成部分；

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>

这正常工作，但是如果const ReposGrid = R.pipe( R.prop("repos"), // branch(R.isEmpty, renderComponent(Loader)), R.map(Repo), ReposWraper ) export default ReposGrid为空，我想渲染加载器组件。我的repos来自重组，什么也没做。它不会显示Loader在加载时也不会显示branch。我可以在这里申请repos吗？

Answer 1

您可能会混合使用ramda的pipe / compose和recompose以及它们接受的参数。您的链条由在道具上运行的高阶组件和功能组成。最好将数据处理保持在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

如何将ramda与重组结合起来？

1 个答案: