Question

我需要将无状态功能组件重构为类。当我这样做的时候，我一直在看到React本身未定义的错误。

import React from 'react';
import { Cell } from 'fixed-data-table';

const DataCell = ({rowIndex, columnKey, data, onMessageClicked, ...props}) => {
  return (
    <Cell {...props} onClick={onMessageClicked(data[rowIndex].Id)}>
      {data[rowIndex][columnKey]}
    </Cell>
  );
};

export default DataCell;

到

import { React, Component } from 'react';
import { Cell } from 'fixed-data-table';

class DataCell extends Component {

  onCellClicked() {
    this.props.onMessageClicked(this.props.data[this.props.rowIndex].Id);
  }

  render() {
    const {rowIndex, columnKey, data, ...props} = this.props;
    return (
      <Cell {...props} onClick={onCellClicked}>
        {data[rowIndex][columnKey]}
      </Cell>
    );
  }
}

export default DataCell;

bundle.js:43248 Uncaught (in promise) TypeError: Cannot read property 'createElement' of undefined(…)

当我走到那条线时，我看到了

return _react.React.createElement(

我不明白。如何调试/修复此问题？

此应用的完整代码为here，以防我发布的代码与某种方式无关。

谢谢！

Answer 1

...喔

import { React, Component } from 'react';

需要

import React, { Component } from 'react';

：）

Answer 2

OP已经自己回答了这个问题，但没有理由，所以这就是原因！ {直接引用https://github.com/facebook/react/issues/2607#issuecomment-225911048“}

import { React, Component } from 'react';

不正确，应该是

import React, { Component } from 'react';

没有名为React的命名导出。令人困惑的是，因为React是一个CommonJS模块，并且由于你正在使用ES6导入，所以Babel尝试映射语义，但它们并不完全匹配。 {Component}实际上从React本身抓取Component，所以你可能只是：

import React from 'react'

并使用React.Component代替，如果它不那么令人困惑。

Answer 3

对于我来说，TypeScript的解决方案是：

import * as React from 'react';

未捕获（承诺）TypeError：无法读取属性＆＃39; createElement＆＃39;未定义的（...）

3 个答案: