React ES6 Error: Invariant Violation: CampaignMobile.render(

Question

我有一个非常简单的例子。我是react和ES6的新手，所以这对我来说可能是愚蠢的:

App.js:

import React, { Component } from 'react';
import { CampaignListMobile } from './campaign_list_mobile.js'
var campaigns = [
  {
    id: 1,
    name: 'My first testing'
  },
  {
    id: 2,
    name: 'My second testing'
  }
];
export class App extends Component {
  render() {
    return (
        <CampaignListMobile campaigns={campaigns}/>
    );
  }
}

campaign_list_mobile.js:

import React, { Component } from 'react';
import { CampaignMobile } from './campaign_mobile.js'

export class CampaignListMobile extends Component {
  render() {
    let campaigns = [];
    let data = this.props.campaigns;
    data.forEach(function(campaign){
      var html = <li><CampaignMobile /></li>
      campaigns.push(html);
    }.bind(this));
    return (      
      <ul>
        {campaigns}
      </ul>
    );
  }
}

campaign_mobile.js:

import React, { Component } from 'react';
export class CampaignMobile extends Component {
  render() {
    <h2>Testing</h2>
  }
}

抛出错误

Uncaught Error: Invariant Violation: CampaignMobile.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

这可能与我如何尝试在中构建列表有关。

Answer 1

你需要返回JSX(目前你的渲染函数只是返回undefined，即不是一个有效的ReactComponent):

render() {
 return <h2>Testing</h2>;
}

注意，如果它跨越多行，你需要在()中换行。

注:您可能不需要在导入

中包含.js扩展名

你也会发现在这样的情况下使用map和es6箭头函数更简洁:

render() {
  return (      
    <ul>
      {this.props.campaigns.map(campaign => {
        return <li><CampaignMobile campaign={campaign} /></li>;
      })}
    </ul>
  );
}

和React会抱怨，如果你不提供一个唯一的key道具为每个li，因为它不能有效地更新列表，所以如果campaign有一些独特的属性，然后使用ie。key={campaign.id}