React中将返回组件的函数作为prop传递是否属于不良编码风格？

这种将返回组件的函数作为prop传递的写法完全符合React开发规范，不属于不良编码风格，这是React生态中非常成熟的「渲染属性（Render Props）」组件复用模式，恰恰是适配你这类场景的最优解之一。

• 权责拆分清晰：RootTable只需要封装所有表格通用的逻辑，比如容器样式、分页、排序、全局搜索、批量选择等通用能力，完全不需要感知行内的渲染逻辑，避免了为适配不同行结构给RootTable加大量冗余的判断逻辑
• 灵活性极高：调用方可以完全自主控制行的渲染逻辑，除了你已经封装的PersonRow、BuildingRow，后续新增其他业务表格也不需要修改RootTable的源码，只需要传入对应业务的renderRow函数即可，扩展性极强

这个写法本身没有问题，唯一需要注意的是性能优化场景：
如果你在函数组件中直接内联编写renderRow的箭头函数，每次父组件重渲染时都会生成新的函数引用，可能会触发RootTable的不必要重渲染。可以用useCallback缓存渲染函数来规避这个问题，示例如下：

import { useCallback } from 'react'

// 组件内部
const renderBuildingRow = useCallback((entry) => {
  return <BuildingRow entry={entry} some_prop="some_val" />
}, [/* 此处填入函数依赖的外部变量，没有依赖留空即可 */])

// 调用RootTable
return <RootTable
  some_prop="some_val"
  renderRow={renderBuildingRow}
/>

如果你的RootTable本身没有做重渲染优化（比如没有用React.memo包裹），那内联写法完全不会有任何问题，不需要额外处理。

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