使用React Router及外部组件时遇‘React.createElement类型无效’错误

这个错误的根源很明确——你在Login.jsx里找错了Input组件的来源！

问题所在 #

你现在是从bootstrap包导入Input：

import {Input} from 'bootstrap';

但reactstrap的组件是封装在reactstrap这个独立包中的，原生Bootstrap并没有提供React组件形式的Input，所以你导入的Input实际上是undefined，这就导致React无法识别这个组件类型，抛出了那个警告。

修复步骤 #

1. 确认依赖已安装
   首先确保你已经安装了reactstrap和它依赖的Bootstrap样式包，如果还没装，在项目根目录执行：

   # npm 用户
   npm install reactstrap bootstrap
   # yarn 用户
   yarn add reactstrap bootstrap
   

2. 修正导入语句
   把Login.jsx里的导入行改成从reactstrap导入：

   import {Input} from 'reactstrap';
   

3. 引入Bootstrap样式
   别忘了在项目入口文件（比如index.js或者App.jsx）中引入Bootstrap的CSS，否则组件不会有正确的样式：

   import 'bootstrap/dist/css/bootstrap.min.css';
   

修正后的完整Login.jsx代码 #

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

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

export default Login;

这样修改之后，你的Input组件就能正常渲染了，那个类型无效的警告也会消失~

内容的提问来源于stack exchange，提问作者arguin