Question

当我尝试将无状态组件导入到我的App.js中运行时，我收到错误type is invalid。当我在App.js中运行相同的代码时，它工作正常，但是当我导入它时，它会中断。这里的解决方案是什么以及发生了什么？

提前谢谢

我的mobile.js

import React from 'react';

//this part will be imported via a component.  Need to check and make sure how to update state via component.
const checkIfMobile = {
  Android: function() {
    return navigator.userAgent.match(/Android/i);
  },
  BlackBerry: function() {
    return navigator.userAgent.match(/BlackBerry/i);
  },
  iOS: function() {
    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
  },
  Opera: function() {
    return navigator.userAgent.match(/Opera Mini/i);
  },
  Windows: function() {
    return navigator.userAgent.match(/IEMobile/i);
  },
  any: function() {
    return (
      checkIfMobile.Android() ||
      checkIfMobile.BlackBerry() ||
      checkIfMobile.iOS() ||
      checkIfMobile.Opera() ||
      checkIfMobile.Windows()
    );
  }
};

export default checkIfMobile;

导入到App.js中并给出type is invalid错误。

import React, { Component } from 'react';
import ChromePluginNotice from '../components/banner/ChromePluginNotice';
import Content from './Content';
import Banner from './Banner';
import Footer from '../components/footer/Footer';
import checkIfMobile from '../components/banner/checks/mobile';

// //this part will be imported via a component.  Need to check and make sure how to update state via component.
// const checkIfMobile = {
//   Android: function() {
//     return navigator.userAgent.match(/Android/i);
//   },
//   BlackBerry: function() {
//     return navigator.userAgent.match(/BlackBerry/i);
//   },
//   iOS: function() {
//     return navigator.userAgent.match(/iPhone|iPad|iPod/i);
//   },
//   Opera: function() {
//     return navigator.userAgent.match(/Opera Mini/i);
//   },
//   Windows: function() {
//     return navigator.userAgent.match(/IEMobile/i);
//   },
//   any: function() {
//     return (
//       checkIfMobile.Android() ||
//       checkIfMobile.BlackBerry() ||
//       checkIfMobile.iOS() ||
//       checkIfMobile.Opera() ||
//       checkIfMobile.Windows()
//     );
//   }
// };

export default class App extends Component {
  constructor() {
    super();
    this.state = { isMobile: checkIfMobile.any() };
  }
  render() {
    const { isMobile } = this.state; // destructure isMobile to variable

    return (
      <div>
        <ChromePluginNotice />

        <Banner isMobile={isMobile} />
        <Content isMobile={isMobile} />
        <Footer />
      </div>
    );
  }
}

不知道如何解决这个问题。完整错误是

invariant.js?4599:44 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of {StatelessComponent {1}}

Answer 1

有些流氓代码试图访问旧版本的mobile.js，现在一切正常。

react.js无状态组件在导入时给出“无效”错误

1 个答案: