如何编写接收数据源与渲染函数的React可复用函数式组件？

问题梳理 #

你的自定义列表组件存在两个核心问题：

• ListComponent内部遍历dataSource时，没有将当前数组项作为参数传入itemRender函数
• 在父组件中传递itemRender时，错误地传入了函数执行结果（比如写了itemRender(item)），而非函数本身的引用

修复后的完整代码示例 #

1. 正确实现ListComponent组件

import React from 'react';

// 可选：定义Props类型增强代码提示
type ListComponentProps = {
  dataSource: Array<Record<string, any>>;
  itemRender: (item: Record<string, any>) => React.ReactNode;
};

const ListComponent: React.FC<ListComponentProps> = ({ dataSource, itemRender }) => {
  return (
    <div className="list-container">
      {/* 修复点1：遍历数据源时，将当前项传入itemRender */}
      {dataSource.map((item, index) => (
        <div key={index} className="list-item">
          {itemRender(item)}
        </div>
      ))}
    </div>
  );
};

export default ListComponent;

2. 父组件正确使用ListComponent

import React from 'react';
import ListComponent from './ListComponent';

const App = () => {
  // 模拟数据源
  const mockData = [
    { id: 1, name: 'Item 1', desc: 'First list item' },
    { id: 2, name: 'Item 2', desc: 'Second list item' },
    { id: 3, name: 'Item 3', desc: 'Third list item' },
  ];

  // 自定义列表项渲染函数
  const renderItem = (item) => (
    <div>
      <h3>{item.name}</h3>
      <p>{item.desc}</p>
    </div>
  );

  return (
    <div className="app">
      {/* 修复点2：直接传递函数引用，不要加括号调用 */}
      <ListComponent dataSource={mockData} itemRender={renderItem} />
    </div>
  );
};

export default App;

关键修复说明 #

1. 组件内部参数传递：在map遍历过程中，把当前循环的item作为参数传给itemRender，确保自定义渲染函数能拿到单条数据进行个性化渲染
2. 传递函数引用：父组件向itemRender传值时，直接传入函数名即可——如果加括号调用，会立即执行函数并传递返回结果，而非让子组件在合适时机调用函数

这样实现后，组件就具备了类似DevExtreme React组件的复用能力：你可以随时替换dataSource数据源，或者编写不同的itemRender函数来渲染不同样式的列表项，无需修改ListComponent本身。

内容的提问来源于stack exchange，提问作者Sebastian Meckovski