ReactNative的编码规范造成的报错问题

最新推荐文章于 2025-06-22 22:52:57 发布

原创最新推荐文章于 2025-06-22 22:52:57 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#编码

React Native 专栏收录该内容

11 篇文章

订阅专栏

本文解决了React中因代码格式不当导致的“未返回有效组件”错误，并介绍了三种不同的render方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

坚持成长每日一篇

今天遇到一个bug

AwesomeProject.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

代码如下：

var AwesomeProject = React.createClass(
{
    //右边按钮
    onRightButtonPress: function()
    {
      this.refs.nav.push({
        title:'From Right',
        component: ForRightScene
      })
    },
   //ref="nav"是给NavigatorIOS添加引用，类似给view设置一个tag，方便onRightButtonPress函数调用
    render:function()
    {
      return
      (
        <NavigatorIOS
          ref="nav"
          style={styles.container}
          initialRoute={{
            component: HomeScene,
            title: 'My View Title',
            rightButtonTitle:'MORE!',
            onRightButtonPress:this.onRightButtonPress,
          }}
        />
      );
    }

});

大概意思是没有返回一个有效的组件：
经过查找发现原来是我的return()第一个括号换行了。。。所以才造成了上面的错误。。。

同时这里介绍render的几种写法
第一种是直接带function如：

   render:function()
    {
      return(
        <NavigatorIOS
          ref="nav"
          style={styles.container}
          initialRoute={{
            component: HomeScene,
            title: 'My View Title',
            rightButtonTitle:'MORE!',
            onRightButtonPress:this.onRightButtonPress,
          }}
        />
      );
    }

第二种是省去：function，风格有点像C语言函数的掉用如：

render (){
   return(
        <NavigatorIOS
          ref="nav"
          style={styles.container}
          initialRoute={{
            component: HomeScene,
            title: 'My View Title',
            rightButtonTitle:'MORE!',
            onRightButtonPress:this.onRightButtonPress,
          }}
        />
    );
};

第三种是用=>语法,这样子就省去了return语句了

 render:() =>(
      <NavigatorIOS
        ref="nav"
        style={styles.container}
        initialRoute={{
          component: HomeScene,
          title: 'My View Title',
          rightButtonTitle:'MORE!',
          onRightButtonPress:this.onRightButtonPress,
        }}
      />
  ),