遇到错误“不变违规：对象无效作为React child

Question

嗨，我在这里的Ractjs，我想在我现有的应用程序的主页中呈现carousel， 我的 index.js 文件包含

import React from 'react'
import HeaderContainer from 'containers/HeaderContainer'
import Footer from 'components/Footer'
import Flashes from 'containers/Flashes'
import Carousel from 'components/Carousel' #i have added for carousel functionality
export default (props) => {
 return (
   <div>
    <HeaderContainer />
    <Flashes fixed={true}/>
    <main id="page">
      <div className="container-fluid">
        {props.children}
      </div>
    </main>
       <Carousel /> #this is too i added
        <Footer />        
   </div>
 )
}

我在组件文件夹中的carousel.js就像

'use strict';

  var React = require('react');

  var Carousel = require('nuka-carousel');

  const App1 = React.createClass({
  mixins: [Carousel.ControllerMixin],
 render() {
   return (
    <Carousel>
       <img src="https://placehold.it/1000x400/ffffff/c0392b/&text=slide1"/>
      <img src="https://placehold.it/1000x400/ffffff/c0392b/&text=slide2"/>
     <img src="https://placehold.it/1000x400/ffffff/c0392b/&text=slide3"/>
     <img src="https://placehold.it/1000x400/ffffff/c0392b/&text=slide4"/>
      <img src="https://placehold.it/1000x400/ffffff/c0392b/&text=slide5"/>
      <img src="https://placehold.it/1000x400/ffffff/c0392b/&text=slide6"/>
    </Carousel>
    )
  }
});
module.exports = App1;

当我在新创建的应用程序中使用上述代码时，请帮助我，

我也试过ES6并删除mixins但仍然存在错误

'use strict';

var React = require('react');

var Carousel = require('nuka-carousel');

class App1 extends React.Component {

 // mixins: [Carousel.ControllerMixin],
render() {
  return (
  <Carousel>
    <img 
src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide1"/>
    <img 
src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide2"/>
    <img 
src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide3"/>
    <img 
src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide4"/>
    <img 
src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide5"/>
    <img 
src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide6"/>
      </Carousel>
    )
  }
}
module.exports = App1;