Question

我尝试使用来自＆＃39; reactstrap＆＃39;的{Input}等组件时出现以下错误。在外部组件中，似乎我没有以某种方式将反应堆很好地导入到组件的其余部分。

我的 App.jsx 是这样的：

import React, {Component} from 'react';
import './App.css';
import Login from './Login';
import {BrowserRouter as Router, Link, Route} from 'react-router-dom'

class App extends Component {
render() {
    return (
        <Router>
            <div className="App">
                <Link to="/login">
                    <h3 className="App-menu-title">Login</h3>
                </Link>
                <Route exact={true} path="/" component={Login}/>
            </div>
        </Router>)
}
}

export default App;

这是 Login.jsx

import React, {Component} from 'react';
 import {Input} from 'bootstrap';


class Login extends Component {
render() {
    return (
        <div>
        <Input />
        </div>
    )
}
}

export default Login;

这是我得到的错误

index.js:2178 Warning: React.createElement: 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.

Check your code at Login.jsx:9.
in Login (created by Route)
in Route (at App.jsx:14)
in div (at App.jsx:10)
in Router (created by BrowserRouter)
in BrowserRouter (at App.jsx:9)
in App (at index.js:9)

Answer 1

您正在错误地导入reactstrap组件，您需要从bootstrap导入它，而是从import {Input} from 'reactstrap';

导入它

{{1}}

Answer 2

您从bootstrap导入，而不是从reactstrap导入...

如果您使用create-react-app并且在使用反应堆时遇到问题，以下内容可能有所帮助：How to install Reactstrap。

对于具有受控组件的表单示例，使用reactstrap，您可能会看here。

Answer 3

您需要从reactstrap而不是bootstrap

导入输入

import { Input } from 'reactstrap'

获取错误＆＃34; React.createElement：类型无效 - 期望字符串＆＃34;使用React Router和导入其他组件的外部组件时

3 个答案: