解决React-Native项目报错【Element type is invalid】

  • Z时代
  • 2024-01-10
  • 分类：综合

react


运行项目时出现：无效的元素类型

在网上搜集了几个fix bug的方法，现在总结一下。这也时是当再次遇见相类似的问题时的解决的思路。

可能问题一：组件的导入导出出错

在这之前我并不知道组件类的两种导出方式有什么区别，以至于在一段时间中一直糊里糊涂。现在做一下区分：
1:第一种方式

class PersonalImg extends Component {
  //定义组件
}
export default PersonalImg

在这种方式定义组件并且导出，需要使用export default PersonalImg的方式进行导出。而在使用到这个PersonalImg组件的地方就需要使用import PersonalImg from '../profile/PersonalImg'这种导入方式。
2:第二种方式

export class PersonalImg extends Component {
  //定义组件
}

直接在定义组件的地方export组件，此时就不需要使用export default PersonalImg这种方式。需要特别注意的是，在使用PersonalImg组件的地方的导入方式：
import { PersonalImg } from '../profile/PersonalImg'
上述两种方式如果搞混了，那么就会出现文章顶部截图中的错误。

参考链接：https://stackoverflow.com/questions/48738761/warning-react-createelement-type-is-invalid-bundle-js

可能问题二：组件调用区域出错

 return (
      <Container>
        <Content>
          <ScrollView>
            {photosContainer}
          </ScrollView>
        </Content>
      </Container>
    )

当调用photosContainer时出现相同的报错信息。此时应该注意，组件的调用区域出错。在查看了React-Native的官方文档之后，发现ScrollView的使用必须要有一个固定的高度，并且他的父元素也要有固定的高度，此时删掉ScrollView标签，项目正常运行起来。

return (
      <Container>
        <Content>
          {photosContainer}
        </Content>
      </Container>
    )

参考链接：https://segmentfault.com/q/1010000011862463

最后的话：

从无从下手到思路清晰，需要经历一个糊涂的阶段。坚持不懈的去思考，去寻找思路 ，肯定会成功的。耐心，信心，

以上是 解决React-Native项目报错【Element type is invalid】 的全部内容， 来源链接： utcz.com/z/381980.html

回到顶部