Question

我正在使用expo开发一个react应用，我想允许我的TopicSection元素中有孩子。我遵循this guide允许在JSX元素中使用子级，并编写了以下代码。我尝试使用this.props.children，但是无论哪种方式，它都会给我“ TypeError：未定义不是对象（正在评估'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。

允许孩子参与反应元素

1 个答案: