创建没有声明的类

问题描述

是否可以创建没有直接定义的类？（eval函数有用吗？）
我尝试执行此操作，但出现错误，例如未定义类名称，并且渲染未返回任何内容和其他错误

import * as React from 'react';
import * as RN from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

const BottomTabs = createBottomTabNavigator();

export default function App(){
  let state = {
    screenNames: ['One','Two','Three'],screenJSXs: [],};
  let SCREENS = [],ClassString = '',Classes = [];
  state.screenNames.map((n)=>{
    state.screenJSXs.push(<RN.View> <RN.Text> Hi {n} </RN.Text> </RN.View>);
  });
  state.screenNames.map((n,i)=>{
    Classes.push('class ' + n + ' extends React.Component{render(){return (' + state.screenJSXs[i] + ')}}');
  // Example
  /*
    class One extends React.Component{
      render(){
        return (
          <View> <Text> Hi One </Text> </View>
        );
      }
    }
  */
  ClassString = Classes.join('\n');
  eval('ClassString');
  });
  state.screenNames.map((n,i)=>{
    SCREENS.push(<BottomTabs.Screen name={n} component={eval('n')} />);
  });
//if n pushed in eval function with '' then project work correctly but with blank pages else return Error : class name was not defined.
  return (
    <NavigationContainer>
      <BottomTabs.Navigator>
        {SCREENS}
      </BottomTabs.Navigator>
    </NavigationContainer>
  );
}

受此问题困扰，我该怎么办？ 谢谢。

解决方法

eval()永远不是解决任何问题的正确方法。在Insead中按预期方式使用React。从组件类开始：

class Screen extends React.Component {
    render(){
        return (
            <RN.View>
                <RN.Text>
                    Welcome back {this.props.name}
                </RN.Text>
            </RN.View>
        );
    }
}

然后创建该组件的实例并将值作为道具传递给它：

let screens = screenNames.map(name => <Screen name=name />);

我在这里使用map()而不是for循环，以便更轻松地从现有名称数组创建新数组。

仅在呈现组件实例列表时，才应创建这样的数组。我认为您实际上不需要此数组，因为这是单个页面，而不是页面内的组件。您实际上并没有多个页面。您有一个页面包含动态数据。您不需要一组类。您需要一个单一的组件类，可用于呈现传递给它的数据。

我建议您阅读React教程，以加深对组件工作原理的了解。

,

eval解析纯JavaScript。您要尝试的是解析jsx。 jsx不是普通的javascript。这是在构建项目时由Transpilator编译的语法糖-在发送给客户端之前。 您可以尝试使用React withotu jsx https://reactjs.org/docs/react-without-jsx.html 但是，您真正应该做的是永远不要使用eval。