对呈现给标头组件的本机不同类别作出反应

我正在开发一个React Native测验应用程序。我已经开发了标题组件,它看起来棒极了。

// import libraries for making a component
import React from 'react';
import { Text, View } from 'react-native';

// make a component
const Header = (props) => {
  const { textStyle, viewStyle } = styles;
  return (
    <View style={viewStyle}>
      <Text style={textStyle}>{props.headerText}</Text>;
    </View>
  );
};

const styles = {
  viewStyle: {
    backgroundColor: '#F8F8F8',
    justifyContent: 'center',
    alignItems: 'center',
    height: 60,
    paddingTop: 15,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    elevation: 2,
    position: 'relative'
  },
  textStyle: {
    fontSize: 20
  }
};

// make a component available to other parts of the app
export default Header;

我将对一个具有类别的api执行一个ajax请求,然后对每个类别执行一个测验问题。

当我向该端点发出GET请求时,我会返回一个对象数组,每个对象都有一个问题类别和一个布尔问题true或false。

所以我总共有10个类别,每个类别有一个问题,总共有10个问题。

因此,我需要找出如何从我的移动应用程序发出Ajax请求或http请求来获取此数据列表,更重要的是,一旦我有了数据列表,我需要找出一种方法来获取要呈现为标题的类别块。

这就是我一直坚持的部分。

我计划有一个名为 QuestionList ,目的 问题列表 将获取数据列表或问题列表,一旦获取,它将呈现多个 QuestionDetail 组件。所以我会有一个 问题列表 和a 问题详细信息 。

但是,api对每个问题都有一个类别,我想将该类别内容呈现为每个问题的标题。因此,每次用户转到下一个问题时,都会使用不同的标题。

因此,在上面的代码中,我没有让标题组件决定应该显示什么文本,而是对其进行了轻微的重构,以便应用程序组件决定在其中显示什么文本。

我是不是把这件事搞砸了?我应该让标题组件决定应该显示什么文本吗?更重要的是,我如何获得 header 组件或 App 要渲染不同类别的组件?我应该创建一个单独的 CategoryList 组件,然后是 CategoryHeader 每个呈现不同于api类别的特定组件的组件?