将类对象传递给 ReactJS 组件

Question

我收到以下错误：

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 

我也从 React 得到这个警告：

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

我遇到的实际问题（正如我通过调试所理解的那样）是我不能将类作为参数传递，如下所示：<BigCard pokemon={result} />，因为这里的结果是类的对象。我应该怎么做才能使其正常工作。有没有将类作为参数传递的最佳实践？

我有这个组件：

export var BigCard = React.createClass({
  render: function() {
    var rows = [];
    var pokemon = this.props.pokemon;
    for (var variable in pokemon) {
      if (pokemon.hasOwnProperty(variable) && variable.toString() !== 'id' && variable.toString !== 'name' && variable.toString !== 'image' && variable.toString !== 'types') {
        rows.push(
          <tr>
            <td class='mdl-data-table__cell--non-numeric'>
              {variable}
            </td>
            <td>
              {pokemon[variable]}
            </td>
          </tr>
        )
      }
    }
    return (
      <div class='mdl-card mdl-shadow--4dp'>
        <div class='mdl-card__title'>
          <img src={pokemon.image.src} alt='Pokemon' class='bigCard__img'/>
        </div>
        <h2 class='mdl-card__title-text'></h2>
        <div class='mdl-card__supporting-text'>
          <table class='mdl-data-table mdl-js-data-table'>
            <thead>
              <tr>
                <th class='mdl-data-table__cell--non-numeric'>Type</th>
                <th class='mdl-data-table__cell--non-numeric'>{pokemon.types}</th>
              </tr>
            </thead>
            <tbody>
              {rows}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
});

我有以下代码，我想运行：

import React from 'react';
import ReactDOM from 'react-dom';
import * as DataLogic from './modules/data-logic.js';
import SmallCard from './components/SmallCard.jsx';
import BigCard from './components/BigCard.jsx';

DataLogic.getPokemonById(3).then((result) => {
  ReactDOM.render(
    <BigCard pokemon={result} />,
    document.getElementById('bigCard')
  );
}).catch((error) => console.log(`${error} in main.js`));

getPokemonById 的结果是DetailedPokemon 类的对象。这是我的类，用作视图模型：

export default class DetailedPokemon {
  constructor(id, name, image, types, attack, defense, hp, spAttack, spDefense, speed, weight, totalMoves) {
    this.id = id;
    this.name = name;
    this.image = image;
    this.types = types;
    this.attack = attack;
    this.defense = defense;
    this.hp = hp;
    this.spAttack = spAttack;
    this.spDefense = spDefense;
    this.speed = speed;
    this.weight = weight;
    this.totalMoves = totalMoves;
  }
}

我希望，我清楚地解释了一切。你能帮我解决我的问题吗？

Answer 1

你importBigCard 不正确，也许 SmallCard 也是。

当您使用export foo = 'bar' 导出某些内容时，foo 使用大括号导入：import {foo} from './fooFile'。

如果要使用import foo from ./fooFile 导入，则 fooFile 必须导出默认值：export default const BigCard = React.createClass(...

这应该会解决它。

Answer 2

这可能是由于以错误的方式导入某些内容。我认为这会奏效：

在您的主应用文件中：

import BigCard from './components/BigCard';

在顶部，只需分配一个常规变量：

var BigCard = React.createClass({...})

在 BigCard 组件的底部：

export default BigCard;

---

使用 ES6 有几种方法可以做到这一点：

---

通过扩展 React.Component：

export default class BigCard extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (<div>MyComponent</div>);
  }
}

注意使用 React.Component 而不是 React.createClass，它们几乎相同。但是对于 React.Component，componentWillMount 逻辑被放置在构造函数中。以及其他一些显着差异：https://toddmotto.com/react-create-class-versus-component/

---

使用 React.createClass：

const BigCard = React.createClass({
  render() {
    return (
      <div></div>
    );
  }
});

export default BigCard;