javascript - 允许 child 参与 react 元素

Question

我正在使用 expo 制作一个 React 应用程序，我想允许子元素出现在我的 TopicSection 元素中。我关注了this guide为了允许 JSX 元素中的子元素，并编写了以下代码。我尝试过使用 this.props.children 但无论哪种方式，它都会给我“TypeError: undefined is not an object (evaluating '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

您正在解构 TopicSection 中的 props 对象，因此通过执行 ({icon, text, props})，您暗示有一个名为 props，但没有。

您要么需要解构 children 并直接使用它，要么执行 ...props，它将所有剩余的、未指定的 props 分配给 props。