1

尝试在外部组件中使用“reactstrap”中的 {Input} 等组件时出现以下错误，似乎我没有以某种方式将 reactstrap 与我的其他组件一起导入。

我的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)
4

3 回答 3

3

您Input错误地导入了组件，您需要从中导入它，reactstrap而不是从bootstrap

import {Input} from 'reactstrap';
于 2018-01-29T16:28:06.723 回答
0

您从引导程序导入，而不是从 reactstrap 导入...

如果您正在使用create-react-app并且在使用 reactstrap 时遇到问题，以下可能会有所帮助：如何安装 Reactstrap。

对于使用 reactstrap 的带有受控组件的表单示例，您可以查看此处。

于 2018-01-29T16:29:42.133 回答
0

您需要导入 Input fromreactstrap而不是bootstrap

import { Input } from 'reactstrap'
于 2018-01-29T16:51:04.380 回答