React Native - 超级表达式必须为空或函数，而不是未定义

Posted 2023-03-15

【中文标题】React Native - 超级表达式必须为空或函数，而不是未定义

【英文标题】：React Native - Super expression must either be null or a function, not undefined

【发布时间】：2016-06-16 21:44:03

【问题描述】：

按照本教程https://www.raywenderlich.com/126063/react-native-tutorial

我在 Hello World 阶段收到以下错误：

2016-06-16 22:38:30.192 [error][tid:com.facebook.react.javascript] Super expression must either be null or a function, not undefined
2016-06-16 22:38:30.197 [fatal][tid:com.facebook.react.RCTExceptionsManagerQueue] Unhandled JS Exception: Super expression must either be null or a function, not undefined
2016-06-16 22:38:32.059 [error][tid:com.facebook.react.JavaScript] Module AppRegistry is not a registered callable module.
2016-06-16 22:38:32.060 [fatal][tid:com.facebook.react.RCTExceptionsManagerQueue] Unhandled JS Exception: Module AppRegistry is not a registered callable module.

index.ios.js的完整代码是：

'use strict';

var React = require('react-native');

var styles = React.StyleSheet.create(
  text: 
    color: 'black',
    backgroundColor: 'white',
    fontSize: 30,
    margin: 80
  
);

class PropertyFinderApp extends React.Component 
  render() 
    return React.createElement(React.Text, style: styles.text, "Hello World!");
  


React.AppRegistry.registerComponent('PropertyFinder', function()  return PropertyFinderApp );

==== 更新

稍后在博客中提到使用一些更新的代码。但是，这也给了我错误。具体代码：

import React,  Component  from 'react';
import 
AppRegistry,
StyleSheet,
Text,
View,
NavigatorIOS
 from 'react-native';

var styles = StyleSheet.create(
text:

color: 'black',
backgroundColor: 'white',
fontSize: 30,
margin: 80

);

class PropertyFinderApp extends Component 
render() 
return "Hello World"



AppRegistry.registerComponent('PropertyFinder', function()

return PropertyFinderApp;
);

和错误：

2016-06-16 22:50:28.181 [info][tid:com.facebook.react.JavaScript] Running application "PropertyFinder" with appParams: "rootTag":1,"initialProps":. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
2016-06-16 22:50:28.205 [error][tid:com.facebook.react.JavaScript] PropertyFinderApp.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
2016-06-16 22:50:28.209 [fatal][tid:com.facebook.react.RCTExceptionsManagerQueue] Unhandled JS Exception: PropertyFinderApp.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

有什么建议我可能做错了吗？

【参考方案1】：

第一个版本不起作用，因为您应该从'react' 导入Component，而不是从'react-native' 导入。

应该是这样的

var React = require('react');
var ReactNative = require('react-native');
var 
  Image,
  AppRegistry
  ScrollView,
  StyleSheet,
  Text,
  View,
 = ReactNative;

class PropertyFinderApp extends React.Component 
  render() 
    return (<View>
         <Text>
           Hello world
         </Text>
      </View>)       
  


AppRegistry.registerComponent('PropertyFinder', () => PropertyFinderApp);

并且更新版本不起作用，因为您的 PropertyFinderApp 组件没有返回元素，而是返回了一个字符串，这是错误的。

这个

import React,  Component  from 'react';
import 
    AppRegistry,
    StyleSheet,
    Text,
    View,
     NavigatorIOS
 from 'react-native';

class PropertyFinderApp extends Component 
    render() 
      return "Hello World" // You should return an element, not a String
    


AppRegistry.registerComponent('PropertyFinder',() => PropertyFinderApp; );

应该是

import React,  Component  from 'react';
import 
    AppRegistry,
    StyleSheet,
    Text,
    View,
     NavigatorIOS
 from 'react-native';

class PropertyFinderApp extends React.Component 
  render() 
    return (<View>
         <Text>
           Hello world
         </Text>
      </View>)       
  


AppRegistry.registerComponent('PropertyFinder',() => PropertyFinderApp; );

【讨论】：

我复制并粘贴了，但第一个给了我这个错误：[tid:com.facebook.react.JavaScript] undefined is not an object (evaluating 'React.AppRegistry.registerComponent')

我忘记从“react-native”添加 AppRegistry。只需从“react-native”导入 AppRegistry。我编辑了答案。

谢谢，我的导入错误，一直在寻找答案。这终于让我意识到它就在我面前。

【参考方案2】：

class PropertyFinderApp extends Component 
render() 
return (
  <View>
    <Text>
       Hello world
    </Text>
  </View>       
);