reactjs - 使用 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} />;
});

如何将 Prop advisor.id(第二个参数)添加到该 map 中？

Answer 1

您可以使用 currying 生成带有 advisorId 的 map 回调:

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>