Разрешить детям в реактивном элементе

Question

Я создаю приложение реакции, используя expo, и я хочу разрешить дочерние элементы в моем элементе TopicSection. Я следовал этому руководству , чтобы разрешить дочерние элементы в элементах JSX, и написал следующий код. Я пытался использовать this.props.children, но в любом случае он дает мне «TypeError: undefined не является объектом (оценивает 'props.children')"

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>
  );
}

Answer 1

Вы уничтожаете объект props в TopicSection, поэтому, делая ({icon, text, props}), вы подразумеваете, что есть реквизит, называемый props, которого нет.

Вам необходимо либо деструктурировать children и использовать его напрямую, либо выполнить ...props, который присваивает всем оставшимся неопределенным реквизитам props.