Javascript 在react元素中允许子元素

我正在使用expo制作一个react应用程序，我想在我的TopicSection元素中允许儿童使用。我遵循了允许JSX元素中包含子元素的原则，并编写了以下代码。我尝试过使用this.props.children，但无论哪种方式，它都会给出“TypeError:undefined不是对象（评估'props.children'）”

import*as React from'React'；
从“react native”导入{样式表、文本、视图}；
从“@expo/vector icons”导入{Ionicons}；
从“世博网络浏览器”导入*作为网络浏览器；
从“react native手势处理程序”导入{RectButton，ScrollView}；
导出默认函数TopicsScreen（）{
返回(
这就是我想要放置元素的地方
);
}
函数TopicSection（{图标、文本、道具}）{
返回(
{“+text}
{props.children}
);
}

您正在解析TopicSection中的

props

对象，因此通过执行

（{icon，text，props}）

，您就意味着有一个名为

props

的道具，而实际上没有

---

您或者需要分解出

子类

并直接使用它，或者执行

…道具

，将所有剩余的未指定道具分配给

道具

您正在TopicSection中解构

props

对象，因此通过执行

（{icon，text，props}）

，您意味着有一个名为

props

的道具，但实际上没有

---

您或者需要分解出

子类

并直接使用它，或者执行

…道具

，将所有剩余的未指定道具分配给

道具

您正在使用功能组件。使用儿童作为普通道具。@evolutionxbox我对反应非常陌生，我该怎么做？我建议您在使用函数组件时，先阅读教程。使用儿童作为普通道具。@evolutionxbox我真的是个新手，我该怎么做？我建议先阅读教程

import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import * as WebBrowser from 'expo-web-browser';
import { RectButton, ScrollView } from 'react-native-gesture-handler';

export default function TopicsScreen() {
  return (
    <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
      <TopicSection
        icon="ios-chatboxes"
        text="Introduction">
          <Text>This is where I want to put elements</Text>
      </TopicSection>
    </ScrollView>
  );
}
function TopicSection({icon, text, props}) {
  return (
    <View style={styles.TopicSection}>
      <View style={styles.TopicSectionContainer && {flexDirection: 'row'}}>
        <Ionicons name={icon} size={32} color="rgba(0,0,0,0.35)" />
        <Text style={styles.TopicSectionText}>{" " + text}</Text>
      </View>
        {props.children}
    </View>
  );
}