Question

我首先要为不清楚的标题道歉，并希望在我的解释之后问题变得清晰。

我遇到的问题是这个;我创建了一个对象（GameCat），并希望使用数组填充它。后来，我希望能够使用数据库（FireBase）填充它，但这与现在无关。

Gamecat：

 var React = require('react');
 var Badge = require('./badge');

 module.exports = React.createClass({
  render: function() {
   return <div className="col-sm-6 col-md-4">
    <div className="thumbnail">
     <img src={this.props.imageUrl} alt="..."></img>
     <div className="caption">
      <h3>{this.props.header}</h3>
      <p>{this.props.description}</p>
      <p>
        <Badge title={this.props.title} number={this.props.number} />
      </p>
    </div>
   </div>
 </div>
 }
});

游戏列表：

  var React = require('react');
  var Header = require('./header');
  var Gamecat = require('./gamecat');

  module.exports = React.createClass({
    render: function() {

      var list = this.props.thumbnailData.map(function(thumbnailProps){
        return <Gamecat {...thumbnailProps} />
      });

      return <div className="row panel panel-defualt">
        <div className="col-md-8 col-md-offset-2">
          <h2 className="text-center">
            Welcome to Project Sophia
          </h2>

          <Header />
          <div>
            {list}
          </div>
        </div>
      </div>
    }
  });

徽章：

var React = require('react');

module.exports = React.createClass({
  render: function() {
    return <button className="btn btn-primary" type="button">
      {this.props.title} <span className="badge">{this.props.number}</span>
    </button>
  }
});

这是数组：

var options = {
  thumbnailData:  [{
    title: 'Show Benchmarks',
    number: 120,
    header: 'Fallout 4',
    description: 'Fallout 4 is an open world action role-playing video game developed by Bethesda Game Studios and published by Bethesda Softworks. The fifth major installment in the Fallout series...',
    imageUrl: 'https://imgrszr-prod.s3.amazonaws.com/1_400--5c49c9942a51f3ad29244289a5de762f641b42cc.png'
  },{
    title: 'Show Benchmarks',
    number: 25,
    header: 'Star Wars',
    description: 'Star Wars Galaxies was a Star Wars themed massively multiplayer online role-playing game for Microsoft Windows, developed by Sony Online Entertainment and published by LucasArts.',
    imageUrl: 'https://levelwhimsicality.files.wordpress.com/2014/06/swg_02.png'
  }]
};

在我创建的测试网站中，我将数组放在app.jsx中，就在它下面我有

var element = React.createElement(Gamelist, options);
ReactDOM.render(element, document.querySelector('.container'));

这非常有效，因此我认为测试页面是成功的。当我尝试将此结构移动到主网站时，问题出现了。我正在使用react-router在页面之间进行更改，这可能会增加问题。我试图将数组放入游戏列表，但我不确定如何将其导出。我还试图为选项创建一个单独的文件，但这也不起作用。我一直收到错误：Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of exports。

代码的创建基于：https://github.com/StephenGrider/ReactCasts/tree/master/thumbnail-gulp

任何帮助都会非常感激，谢谢！

正确破坏ReactJS代码的方法

0 个答案: