React.createElement：类型无效——需要一个字符串答案

【问题标题】：React.createElement: type is invalid -- expected a stringReact.createElement：类型无效——需要一个字符串
【发布时间】：2017-08-06 09:40:52
【问题描述】：

试图让 react-router (v4.0.0) 和 react-hot-loader (3.0.0-beta.6) 正常运行，但在浏览器控制台中出现以下错误：

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.

index.js：

import React from 'react';
import ReactDom from 'react-dom';
import routes from './routes.js';
require('jquery');
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import './css/main.css';

const renderApp = (appRoutes) => {
    ReactDom.render(appRoutes, document.getElementById('root'));
};

renderApp( routes() );

routes.js：

import React from 'react';
import { AppContainer } from 'react-hot-loader';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import store from './store/store.js';
import { Provider } from 'react-redux';
import App from './containers/App.jsx';
import Products from './containers/shop/Products.jsx';
import Basket from './containers/shop/Basket.jsx';

const routes = () => (

    <AppContainer>
        <Provider store={store}>
            <Router history={browserHistory}>
                <Route path="/" component={App}>
                    <IndexRoute component={Products} />
                    <Route path="/basket" component={Basket} />
                </Route>
            </Router>
        </Provider>
    </AppContainer>

);

export default routes;

【问题讨论】：

如果您使用react-router-config，请确保使用component 属性而不是render，因为该软件包不支持后者。见more on GitHub。
检查是否已经创建了要导入的组件，或者它是否确实存在于项目目录中。

标签： reactjs react-router react-hot-loader

【解决方案1】：

我得到了完全相同的错误，请改为：

npm install react-router@next 
react-router-dom@next
npm install --save history

【讨论】：

别忘了重启你的 webpack 观看

【解决方案2】：

在我的例子中，我添加了相同的自定义组件作为道具而不是实际道具

   import AddAddress from '../../components/Manager/AddAddress';
    
    class Add extends React.PureComponent {
      render() {
        const {
          history,
          addressFormData,
          formErrors,
          addressChange,
          addAddress,
          isDefault,
          defaultChange
        } = this.props;

错误：

    return (
        <AddAddress
          addressFormData={addressFormData}
          formErrors={formErrors}
          addressChange={addressChange}
          addAddress={AddAddress} // here i have used the Component name as probs in same component itself instead of prob
          isDefault={isDefault}
          defaultChange={defaultChange}
        />
      </SubPage>

解决方案：

return (
    <AddAddress
      addressFormData={addressFormData}
      formErrors={formErrors}
      addressChange={addressChange}
      addAddress={addAddress} // removed the component name and give prob name
      isDefault={isDefault}
      defaultChange={defaultChange}
    />
  </SubPage>

【讨论】：

什么是概率？你是说道具？

【解决方案3】：

所以我遇到了这个问题，我能够以一种奇怪的方式解决它。我想我会把它扔掉，以防其他人遇到它并且变得绝望。

我有一个有条件的渲染 react 元素，它仅在状态中的对象大于零时渲染。在渲染函数中 - 当三元运算符被证明为真时，我收到了这篇文章所涉及的错误。我在我的渲染函数中使用了<React.Fragment> - 这是我通常将孩子分组的方式，而不是使用更新的短语法（<> and </>）的更新方式。

但是，当我将 <React.Fragment> 更改为短语法时 - 反应元素正确呈现并且错误停止出现。我查看了 Facebook 的 React-Fragment 文档，我看不出有任何理由相信两者之间存在巨大差异会导致这种情况。无论如何，下面是两个简化的 sn-ps 代码供您查看。第一个演示了产生错误的代码，第二个演示了解决问题的代码。底部是组件本身的渲染函数。

希望有人觉得这很有帮助。

代码示例 1 - 错误 条件渲染的 React 元素


  renderTimeFields = () => {
    return (
      <React.Fragment>
        <div className="align-left">
                <div className="input-row">
                  <label>Date: </label>
                  <input type="date" className="date" name="date" min={new Date().toISOString().split('T')[0]} required/>
                </div>
              </div>
              <div className="align-left sendOn-row">
                <div className="input-row">
                  <label>Time: </label>
                  <input type="time" className="time" name="time" required/>
                </div>
              </div>
      </React.Fragment>
    );
  }

代码示例 2 - 无错误 条件渲染的 React 元素


  renderTimeFields = () => {
    return (
      <>
        <div className="align-left">
                <div className="input-row">
                  <label>Date: </label>
                  <input type="date" className="date" name="date" min={new Date().toISOString().split('T')[0]} required/>
                </div>
              </div>
              <div className="align-left sendOn-row">
                <div className="input-row">
                  <label>Time: </label>
                  <input type="time" className="time" name="time" required/>
                </div>
              </div>
      </>
    );
  }

在组件内渲染函数

render() {
<form>
...
{emailsInActiveScript > 1 ? this.renderTimeFields() : null}
</form>
etc...
}

【讨论】：

【解决方案4】：

我只花了 30 分钟试图解决这个 BASIC 基本问题。

我的问题是我正在导入反应原生元素

例如import React, { Text, Image, Component } from 'react';

并尝试使用它们，这导致我收到此错误。

一旦我从<Text> 切换到<p> 和<Image> 到<img>，一切都按预期工作。

【讨论】：

【解决方案5】：

我收到了这个错误，没有一个回复是我的情况，这可能有助于有人在谷歌上搜索：

我定义的 Proptype 错误：

ids: PropTypes.array(PropTypes.string)

应该是：

ids: PropTypes.arrayOf(PropTypes.string)

VSCode 和编译错误没有给我正确的提示。

【讨论】：

【解决方案6】：

// @flow

import React from 'react';
import { styleLocal } from './styles';
import {
  View,
  Text,
  TextInput,
  Image,
} from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';

export default React.forwardRef((props, ref) => {
const { onSeachClick, onChangeTextSearch , ...otherProps } = props;

  return (
        <View style={styleLocal.sectionStyle}>
        <TouchableOpacity onPress={onSeachClick}>
            <Image                              
                    source={require('../../assets/imgs/search.png')}
                    style={styleLocal.imageStyle} />
                </TouchableOpacity>
            <TextInput
                style={{ flex: 1, fontSize: 18 }}
                placeholder="Search Here"
                underlineColorAndroid="transparent"
                onChangeText={(text) => { onChangeTextSearch(text) }}
            />
        </View>
  );
});
 import IGPSSearch from '../../components/IGPSSearch';
<Search onSeachClick={onSeachClick} onChangeTextSearch= {onChangeTextSearch}> </Search>

【讨论】：

【解决方案7】：

我也有类似的问题。发生这种情况是因为我在父组件中导入了一个已删除且实际上不存在的子组件。我审查了父组件的每个导入，在这种情况下，父组件是 ListaNegra.js

【讨论】：

【解决方案8】：

编辑

您正在使流程复杂化。只需这样做：

index.js：

import React from 'react';
import ReactDom from 'react-dom';
import routes from './routes.js';
require('jquery');
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import './css/main.css';

ReactDom.render(<routes />, document.getElementById('root'));

routes.js：

import React from 'react';
import { AppContainer } from 'react-hot-loader';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import store from './store/store.js';
import { Provider } from 'react-redux';
import App from './containers/App.jsx';
import Products from './containers/shop/Products.jsx';
import Basket from './containers/shop/Basket.jsx';

const routes =
    <AppContainer>
        <Provider store={store}>
            <Router history={browserHistory}>
                <Route path="/" component={App}>
                    <IndexRoute component={Products} />
                    <Route path="/basket" component={Basket} />
                </Route>
            </Router>
        </Provider>
    </AppContainer>;

export default routes;

【讨论】：

你确定问题来自这里吗？而不是来自页面本身？