Question

我有一个组件someComponent，一个函数withMoreStuff接受一个类，返回一个类。我检查了所有导入/导出，没有任何默认或命名导出的问题。

错误：React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

// @flow
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { withMoreStuff } from 'hocs';
import { someComponent } from 'components';

type PropsType = {
  data: [{ id: number }],
}

const wrappedComponent = withMoreStuff(someComponent);

class ItemList extends Component {
  props: PropsType;

  renderRows(data: any) {
    return data.map( item =>
        <wrappedComponent key={item.id} data={item} />
    );
  }

  render() {

    return (
      <div>
        {this.renderRows(this.props.data)}
      </div>
    );
  }
};

export default ItemList;

此文件返回的错误是wrappedComponent不是有效的类。

如果我将行const wrappedComponent = withMoreStuff(someComponent);移动到渲染方法中，它将正确渲染：

render() {
    const wrappedComponent = withMoreStuff(someComponent);
    return (
      <div>
        {this.renderRows(this.props.data)}
      </div>
    );
}

WHY ???

Answer 1

我相信你没有收到任何道具而你的renderRows方法没有返回任何东西，请检查这是否解决了它：

renderRows(data: any) {
    if( !data ) return </div>; 
    return data.map( item =>
        <wrappedComponent key={item.id} data={item} />
    );
}

高阶组件：React.createElement：类型无效

1 个答案: