Question

我正在尝试实现react-native-chart-kit的动态呈现，其中图表类型将在props中设置。

我想这样做

import { LineChart, BarChart, PieChart, ProgressChart, ContributionGraph, StackedBarChart} from 'react-native-chart-kit'

export function chart(props){
   return <{props.type} data={props.data} //props.type is one of the imported components
            width={Dimensions.get('screen').width}
            height={220}
            chartConfig={props.config}
            style={{
              marginVertical: 8,
              borderRadius: 16
            }} />
}

有没有办法像这样？

Answer 1

如果您有一个简单的字符串组件（例如h1或a），则可以将其分配给变量，例如

export function chart(props){
   const Type = 'a';
   return <Type />; // React.createElement('a') should also work
}

在您引用类的情况下，您可能会发现更容易导入整个库：

import * as ChartKit from 'react-native-chart-kit'

export function chart(props){
   if (ChartKit[props.type]) {
       const Type = ChartKit[props.type];
       return <Type data={props.data} //props.type is one of the imported components
            width={Dimensions.get('screen').width}
            height={220}
            chartConfig={props.config}
            style={{
              marginVertical: 8,
              borderRadius: 16
            }} />
   }
   return null; // Or throw an error

}

据我所知，没有简单的方法可以从字符串中获取类定义引用（除了进行eval之外，这是一种不好的做法）。

是否可以将字符串转换为jsx组件？反应原生

1 个答案: