React Native中children两种用法的区别及原理咨询

首先明确：children不是函数组件的默认参数，但它是React自动传递给组件的特殊Props——当你在组件标签内部嵌套内容时，React会自动把这部分内容打包成children传给组件。

第一种写法：带默认值的children解构 #

const Component = ({
  children = <Text>Insert Icon</Text>,
}) => {
  return children;
};

这种写法是从组件接收的Props对象里解构出children，同时给它设置了默认值。如果父组件使用这个组件时没有嵌套任何内容（比如<Component />），组件就会渲染默认的<Text>Insert Icon</Text>；如果父组件传递了嵌套内容（比如<Component><Text>我的自定义内容</Text></Component>），就会渲染传递的自定义内容。

第二种写法：注意语法错误！ #

你给出的第二种代码存在语法错误：

// 错误写法
const Component = ({
  {children},
}) => {
  return children;
};

这里的({ {children} })是无效的嵌套解构，正确的基础接收children的写法应该是直接解构：

// 正确写法
const Component = ({ children }) => {
  return children;
};

这种写法只是单纯从Props中取出children，没有设置默认值。如果父组件没传递任何嵌套内容，children就是undefined，组件渲染时不会显示任何内容（如果后续有依赖children的逻辑，可能还会触发报错）。

总结 #

• 第一种写法适合需要兜底内容的场景，确保组件在没有外部传入children时也能正常显示预设内容
• 第二种（修正后的）写法是最基础的接收children方式，仅当父组件传递了嵌套内容时才会渲染对应内容

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