Reactjs 如何制作一个本地应用程序，根据从API获取的名称选择和设计图表？

我想让我的

选项卡dashboarddetails.js

根据从API获取的图表名称找出要显示的图表。在

TabDashboardDetails.js

中，我想用一个组件替换

CogniAreaChart

，该组件将具有获取图表的特定视图，并且还可以从API获取数据

这是我的选项卡DashboardDetails.js

import React from 'react';
import DefaultScrollView from '../components/default/DefaultScrollView';
import ChartView from '../components/default/ChartView';
import CogniAreaChart from '../components/CogniAreaChart';
import { mapNameToChart } from '../utils/commonFunctions';
import { areaChartData } from '../chartData';

const TabDashboardDetail = ({ navigation, route }) => {
  const tabsConfig = route.params.tabsConfig;
  const ChartToDispay = mapNameToChart();
  return (
    <DefaultScrollView>
      {tabsConfig.components.map((comp) => {
        console.log(tabsConfig.components);
        return (
          <ChartView key={comp.name} title={comp.name}>
            <CogniAreaChart
              name={comp.name}
              areaChartData={areaChartData}
              height={200}
            />
          </ChartView>
        );
      })}
    </DefaultScrollView>
  );
};


export default TabDashboardDetail;

---

首先需要导入包含

mapNameToChart

的文件中的所有图表类型，并相应地将名称映射到图表类型。那你可以试试这个

const ChartToDispay = mapNameToChart(name);

<ChartToDisplay {...your_props_here} />

const ChartToDispay=mapNameToChart（名称）；

在您的

mapNameToChart

函数中，看起来

AreaChart

是一个实际的组件，其余的只是

字符串

组件名称，而不是组件本身。您希望对其进行更改，以便映射中的所有条目都是组件。您希望

mapNameToChart（name）

返回一个可调用的组件。然后你可以用你的道具来调用这个组件

我不完全理解你的API在这里发挥作用，但似乎我们通过查找名称来获得道具？我不知道API数据的来源，所以我希望

组件

数组作为道具传递给

自定义图表

const CustomChart = ({name, components, ...props}) => {
  // get the component function/class from your map
  const Component = mapNameToChart(chart);
  // find the component configuration from your API
  const config = components.find(obj => obj.name === name);
  // call with props from the config and passed down props
  return (
    <Component
      {...config}
      {...props}
    />
  )
}

constcustomchart=（{name，components，…props}）=>{
//从映射中获取组件函数/类
常量组件=mapNameToChart（图表）；
//从API中查找组件配置
const config=components.find（obj=>obj.name==name）；
//使用配置中的道具调用并传递道具
返回(
)
}

我的下一步应该做什么？更新了问题，我在console.log（tabsconfog.components）上无法获取title={comp.name}；它正确地显示数据。我做错了什么？通过返回合适的道具解决了标题问题。现在，如何根据从数组中获取的图表名称并使用commonfunctions.js显示图表更新了问题，在console.log（tabsconfog.components）上，我无法获取title={comp.name}；它正确地显示数据。我做错了什么？

const CustomChart = ({name, components, ...props}) => {
  // get the component function/class from your map
  const Component = mapNameToChart(chart);
  // find the component configuration from your API
  const config = components.find(obj => obj.name === name);
  // call with props from the config and passed down props
  return (
    <Component
      {...config}
      {...props}
    />
  )
}