Question

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

列表顶部总会显示一个空的文本节点，我输出了，我无法弄清楚它在那里的原因或如何让它消失。 A view from React's Dev Tools

这是我的代码：

＆＃13;

'use strict'
var React = require('react'),
ReactDOM	= require('react-dom')

var UpcomingMovieList = React.createClass({
	render: function() {
		return(<UpcomingMovie movies={this.props}/>)
	}
})

var UpcomingMovie = React.createClass({
	render: function() {
		console.log(this)
		var movie = 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>)
		})
		return(<div>UpcomingMovie.{movie}</div>)
	}
})

ReactDOM.render(<UpcomingMovieList movies={window.data.movies}/>,
 document.getElementById('app-container')
)

＆＃13;

window.data.movies只是一个对象数组。我现在只想输出标题。

Answer 1

请改为尝试：

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

从UpcomingMovieList组件进行迭代更为理想：

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

迭代通过子组件后反应输出空节点

1 个答案: