将类对象传递给ReactJS组件

Pass class object to ReactJS component

本文关键字：ReactJS 组件 对象      更新时间：2023-09-26

我得到以下错误：

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;
  }
}

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

您import BigCard不正确，也许SmallCard也不正确。

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

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

这应该会解决它。

这可能是以错误的方式导入的。我认为这会起作用：

在您的主应用程序文件中：

import BigCard from './components/BigCard';

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

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

在BigCard组件的底部：

export default BigCard;

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

通过扩展React组件：

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;
相关文章：