使用 lodash/fp 映射和第二个参数重构小函数

Question

我有一个 lodash/fp map 函数，它返回一个组件 Lead。它传递了leads 的列表（我对其进行迭代），但我也想传递一个 id，它会传递给每个组件（每个组件都有相同的 id）

我将数组和字符串传递给组件：

<tbody>{renderLeads(leads, advisor.id)}</tbody>

我的函数返回一个潜在客户的映射数组：

const renderLeads = map(({ node: lead }) => { <--- how do i pass advisor.id into this function
   return <Lead lead={lead} advisorId={advisorId} key={lead.id} />;
});

如何将道具advisor.id（第二个参数）添加到该地图中？

Answer 1

您可以使用 currying 通过 advisorId 生成地图的回调：

const renderLeads = pipe( // pipe is an alias of `_.flow()`
  advisorId => ({ node: lead }) => (
    <Lead lead={lead} advisorId={advisorId} key={lead.id} />
  ),
  map
);

使用它：

<tbody>{renderLeads(advisor.id)(leads)}</tbody>

例子：

const { pipe, map } = _;

const Lead = ({ lead, advisorId }) => (
  <div>{lead.txt} : {advisorId}</div>
);

const renderLeads = pipe(
  advisorId => ({ node: lead }) => (
    <Lead lead={lead} advisorId={advisorId} key={lead.id} />
  ),
  map
);

const Demo = ({ leads, advisor }) => (
  <div>{renderLeads(advisor.id)(leads)}</div>
);

const leads = [{ node: { id: 1, txt: 'lead-1' }}, { node: { id: 2, txt: 'lead-2' }}, { node: { id: 3, txt: 'lead-3' }}];

ReactDOM.render(
  <Demo leads={leads} advisor={{ id: '154' }} />,
  root
);

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<script src='https://cdn.jsdelivr.net/g/lodash@4(lodash.min.js+lodash.fp.min.js)'></script>

<div id="root"></div>