Javascript 将类对象传递给ReactJS组件

我得到以下错误：

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).

我所面临的实际问题（正如我通过调试所理解的）是我不能将类作为参数传递，比如：

，因为这里的结果是类的对象。我应该怎么做才能使它正常工作。有没有把类作为参数传递的最佳实践

我有这个部分：

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

export default BigCard;

---

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

你

错误地导入了

大卡，也许还有小卡

当您使用

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

export default BigCard;

---

对于ES6，有几种方法可以做到这一点：

---

通过扩展React.Component:

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

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

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

export default BigCard;

导出默认类BigCard.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回（MyComponent）；
}
}

请注意，使用React.Component而不是React.createClass时，它们几乎相同。但是使用React.Component时，componentWillMount逻辑放在构造函数中。此外，还有一些其他显著的区别：

---

使用React.createClass:

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

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

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

export default BigCard;

const BigCard=React.createClass({
render（）{
返回(
);
}
});
导出默认的BigCard；

您遇到了什么错误？

JSON.parse

用于解析包含JSON的字符串。如果

result

是一个对象，则不应将其传递给

JSON.parse

@FelixKling谢谢，我已经编辑了这个问题！以下是有关导出类型差异的更多信息：