React组件间传递参数的三种方式有哪些实例？

本文共计3810个文字，预计阅读时间需要16分钟。

目录+前言+方式一：直接传递+jsx+创建良好的元素+方式二：直接传递组件本身+方式三：传递一个返回组件的函数+三种方案的对比+总结+前言+在日常生活中，开发通用组件的机制其实并不复杂。

目录

• 前言
• 方式一：直接传递 jsx 创建好的元素
• 方式二：直接传递组件本身
• 方式三：传递一个返回组件的函数
• 三种方案的对比
• 总结

前言

在日常的开发中，开发通用组件的机会其实并不多，尤其是在各种组件库已经遍地都是的情况下。而作为一个通用组件库的使用者，经常会看到把 React 组件作为参数传递下去的场景，每当这个时候，其实或多或少都会有一些疑问，比如：有些组件传递下去的是组件名，而有些组件传递下去的是一个箭头函数返回一个组件，而有些直接传递一个 jsx 创建好的元素，这些传递方案的适用场景如何，有什么不同，是否会导致组件的 memo 失效，是否会引发组件的不必要渲染?

本文是笔者在阅读了 antd、mui, react-select 的 api 之后，结合自己日常业务中使用的组件 api 格式，对传递一个组件作为 React 组件参数的方式的思考和总结，如果有写的不到位的，欢迎补充和指点。

大体来讲，传递组件的方式，分为三种：

• 传递 jsx 创建好的元素
• 传递组件本身
• 传递返回 jsx 创建好的元素的函数

下文也主要展开介绍这三种方式并结合实际场景对比这三种方案。