Question

我是UI开发的新手，试图将我的组件拆分为不同的文件。这是我需要在其他文件中使用的组件之一。

<div class="container fixed-top">
    <nav class="navbar navbar-light bg-faded">

这是我尝试使用上述组件的主页面。它在浏览器中给出了以下错误

React.createElement：type无效 - 期望一个字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记从文件中导出组件它在
中定义

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';

import {AppBar} from 'material-ui/AppBar';


//injectTapEventPlugin();

class LoginPage extends Component {

  render() {
    return (
      <div>This is from the login page</div>
    );
  }
}
export default LoginPage;

我在SO上看到了类似的错误，但他们都说导出组件时出现了一些问题，我无法看到同样的问题，因为我正在导出LoginPage组件，然后将其导入App.js文件中

有人可以帮忙吗？

Answer 1

这是工作代码

 import xmltodict
 with open(filename) as fd:
    doc = xmltodict.parse(fd.read())

    if type(doc['TestSuite']['TestCase']) == list:    
        tp=doc['TestSuite']['TestCase'][length-1]['totalpass']

        tf=doc['TestSuite']['TestCase'][length-1]['totalfail']

        te=doc['TestSuite']['TestCase'][length-1]['totalerror']

        total=doc['TestSuite']['TestCase'][length-1]['total']

   else: # you have just a dict here
        tp=doc['TestSuite']['TestCase']['totalpass']

        tf=doc['TestSuite']['TestCase']['totalfail']

        te=doc['TestSuite']['TestCase']['totalerror']

        total=doc['TestSuite']['TestCase']['total']

应用页面

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';

import AppBar from 'material-ui/AppBar';

//injectTapEventPlugin();

class LoginPage extends Component {

  render() {
    return (
      <MuiThemeProvider>
      <AppBar title="Title" iconClassNameRight="muidocs-icon-navigation-expand-more" />     
      </MuiThemeProvider>
      );
  }
}
export default LoginPage;

Answer 2

import {AppBar} from 'material-ui/AppBar';

此行不正确。

使用括号导入意味着请求的文件包含多个命名导出。这通常在从索引文件导入时使用。对于material-ui，这意味着这个;

import { AppBar } from 'material-ui';

您可以从'material-ui / AppBar'文件导入，但此文件只声明一个默认导出，因此您需要导入不带括号，如下所示：

import AppBar from 'material-ui/AppBar';

reactjs可重用组件抛出错误

2 个答案: