Javascript 在遍历子组件后，反应输出空节点

我有一个简单的反应组件/子组件结构。在子组件上，我尝试循环遍历一个对象数组并输出该对象的属性值

在我输出的列表的顶部总是显示一个空文本节点，我不知道它为什么在那里，也不知道如何使它消失。

这是我的密码：

“严格使用”
var React=require（'React'），
ReactDOM=require（'react-dom'））
var UpcomingMovieList=React.createClass({
render:function（）{
返回（）
}
})
var UpcomingMovie=React.createClass({
render:function（）{
console.log（这个）
var movie=this.props.movies.movies.map（函数（元素，索引）{
//console.log（元素）
返回（{element.title}）
})
返回（UpcomingMovie.{movie}）
}
})
ReactDOM.render（，
document.getElementById（'app-container'））
)

试试这个：

var UpcomingMovie = React.createClass({
    render: function() {
        return (
          <div>
            <h2>Upcoming Movies</h2>
            {this.props.movies.movies.map(function(element, index) {
               // console.log(element)
              return(<div className='movie' key={element.id}><div className='movie-content'>{element.title}</div></div>)
            })}
          </div>
       );
    }
});

---

你把它放在上映的电影里了。{movie}是吗？不清楚在那之后有什么让你惊讶。

var UpcomingMovieList = React.createClass({
  render: function() {
    return this.props.movies.map((movie) => {
      return <UpcomingMovie movie={movie} />
    });
  }
});

var UpcomingMovie = React.createClass({
  render: function() {
    var movie = this.props.movie;
    return (
      <div className='movie' key={movie.id}>
        <div className='movie-content'>{movie.title}</div>
      </div>
    );
  }
});