React Native自定义组件嵌套子组件实现方法咨询

嘿，这个问题其实是React（包括React Native）里处理组件子元素时的常见小误区，我来帮你梳理清楚～

你遇到的核心问题是：React中嵌套在组件标签内的子元素，是通过props.children这个特殊的内置属性传递的，而不是你自定义的props参数。

你的代码为什么不生效？ #

看你写的CoolCard组件：

const CoolCard = ({props}) => {
  return(
    <View>
      {props}
    </View>
  )
}

这里你试图解构一个名为props的属性，但当你用<CoolCard><Text>...</Text></CoolCard>这种嵌套写法时，React会自动把<Text>元素放到组件的props.children里，而不是你定义的props属性。因为这个props属性根本不存在，所以渲染的时候自然没有内容。

而你第二种写法能生效，是因为你手动把<Text>元素传给了名为props的属性，组件里刚好读取了这个属性，所以能显示内容，但这并不是React处理子元素的标准方式。

如何让第一种写法生效？ #

只需要把组件里的props改成children就可以了，这是React专门用来接收嵌套子元素的属性：

import React from 'react'
import {Text, View} from 'react-native'

// 改用children接收嵌套的子元素
const CoolCard = ({children}) => {
  return(
    <View>
      {children}
    </View>
  )
}

const Home = () => {
  return(
    <View>
      <CoolCard>
        <Text>This is a cool card!</Text>
      </CoolCard>
    </View>
  )
}

export default Home

这样修改后，你第一种嵌套写法就能正常显示内容了～

补充说明 #

• children可以是任意React节点：单个组件、多个组件、文本、甚至是数组形式的元素，都能通过它传递。
• 如果需要更复杂的子元素处理（比如多个插槽），可以自定义属性来传递，但对于简单的嵌套内容，children是最标准的做法。

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