Question

使用以下代码时出现错误：Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import { createBrowserHistory } from 'history';
import configureStore from './store/configureStore';
import App from './App';
import { authConfig } from './auth/authconfig';
import './index.css';
import * as serviceWorker from './serviceWorker';

const history = createBrowserHistory();

const store = configureStore(history, window.initialReduxState);

const rootElement = document.getElementById('root');

console.log('init');
ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  rootElement
);

serviceWorker.register();

App.js

import React from 'react';
import { Route } from 'react-router';
import Layout from './components/Layout';
import Home from './components/Home';

export default () => (
  <Layout>
    <Route exact path="/" component={Home} />
  </Layout>
);

将<App />更改为<p>test</p>可以正常使用，所以我想问题出在App.js中，但不确定那里出了什么问题。

~~此外，当我在.NET Core React-Redux模板的客户端应用程序中使用这些代码时，它可以很好地工作，这使我更加困惑。~~我需要解决什么以及如何解决？如果此信息不够，找到问题了吗？

编辑

我不记得我将.net核心模板中的react-bootstrap替换为reactstrap，所以问题出在了@devserkan指出的NavMenu.js中。

Home.js

import React from 'react';

const Home = props => (
  <div>
    <h1>Hello, world!</h1>
  </div>
);

export default Home;

Layout.js

import React from 'react';
import { Container, Col, Row } from 'reactstrap';
import NavMenu from './NavMenu';

export default props => (
  <Container>
    <Row>
      <Col sm="12" lg={{ size: 10, offset: 1 }}>
        <NavMenu />
      </Col>
    </Row>
    <Row>
      <Col sm="12" lg={{ size: 10, offset: 1 }}>
        {props.children}
      </Col>
    </Row>
  </Container>
);

NavMenu.js

import React from 'react';
import { Link } from 'react-router-dom';
import { Nav, Navbar, NavItem } from 'reactstrap';
import styled from 'styled-components';

export default props => (
  <StyledNavbar inverse fixedTop fluid collapseOnSelect>
    <Navbar.Header>
      <Navbar.Brand>
        <Link to={'/'}>HogeHoge</Link>
      </Navbar.Brand>
      <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>
      <Nav>
        <NavItem href="/counter">Counter</NavItem>
        <NavItem href="/fetchdata">Fetch data</NavItem>
      </Nav>
    </Navbar.Collapse>
  </StyledNavbar>
);

//Styled Components
const StyledNavbar = styled(Navbar)`
  .navbar-nav .active a,
  .navbar-nav .active a:hover,
  .navbar-nav .active a:focus {
    background-image: none;
    background-color: #4189c7;
    color: white;
  }
`;

Answer 1

这通常是错误导入模块的一般错误。您的Layout.js或Home.js中的子组件可能存在问题。确保正确导入模块。

import {MyComponent} from '../components/xyz.js'; // throws error if not default export

vs

import MyComponent from '../components/xyz.js'; // works!

我也看到了我正在使用的库的类似错误。 https://stackoverflow.com/a/52432243/6817437

如果您可以在codesandbox.io中重新创建错误以缩小确切范围，则可能会有所帮助。

侧面说明：使用匿名函数构造React功能组件是不好的做法。隐式命名为O.K.带有箭头功能（see Dan's tweet here）。当匿名函数没有显示名称时，它们就更难于测试和调试组件。

Answer 2

将if let path = Bundle.main.path(forResource: pdfObject, ofType: "pdf") { let url = URL(fileURLWithPath: path) if let pdfDocument = PDFDocument(url: url) { pdfView = PDFView(frame: CGRect(x: 0, y: 0, width: pdfView.frame.width, height: pdfView.frame.height)) pdfView.document = pdfDocument } }等的用法更改为Navbar.Brand，因为没有从NavbarBrand导出为Navbar等。另外有单独的导出为{{1} } here}中的}。

评论后更新

据我所知Brand现在与NavbarBrand一起提供：）

元素类型无效：React.js

2 个答案: