Question

我从API获取一系列项目（电话＆＃39; em电影）。每部电影都有几个细节（标题，导演，演员，故事大纲等）

这是我的结构图：

这是MoviesList组件：

 constructor(props) {
    super(props);

    this.state = {
      movies: []
    };
  }

  componentDidMount() {
    fetch('http://localhost:3335/movies')
      .then(function(response) {
        return response.json()
      }).then((movies) => {
        this.setState({ movies });
      }).catch(function(ex) {
        console.log('parsing failed', ex)
      })
  }

  render() {
    return (
      <div className="movies">
        <Movie movies={this.state.movies}></Movie>
      </div>
    );
  }

这是电影：

render() {

    const movielist = this.props.movies.map((movie) =>
        <li>{movie.title}</li>
    );

    return (
      <ul className="movie">
        { movielist }
      </ul>
    );

}

我的问题：

我应该使用状态或道具将数据从Movielist传递到电影
因为＆＃34; for＆＃34; for＆＃34;模板化，我该如何制作，所以我不是在Movie内创建一个列表，而是在Movie内循环整个Movielist组件？

例如，我想在MovieList中实现以下内容：

  render() {
    return (
      <div className="movies">
        <Movie for movie in movies></Movie>
      </div>
    );
  }

Answer 1

我道具/状态 - 我认为你做的很好;将您的外部组件（ MoviesList ）状态作为prop传递给它的子项（您不会使用api调用的结果设置外部组件自己的属性）。

ii您可以在外部组件中映射电影，例如：

    renderMovie(movie) {
        return (
          <Movie movie={movie} /> 
        ); 
    }

    render() 
    { 
      return ( 
        <div className="movies">
          <ul>
            { this.state.movies.map(this.renderMovie) } 
          </ul>
        </div>
      ); 
    }

Answer 2

render() MovieList：

  render() {
    return (
      <div className="movies">
        {
          this.state.movies
          ? <ul>
              {this.state.movies.map((movie, index) => <Movie title={movie.title} key={index}/>)}
            </ul>
          : null
        }
      </div>
    );
  }

render() Movie：

  render() {
    return (
      <li className="movie">{this.props.title}</li>
    );
  }

我应该使用道具或状态来传递数据吗？

2 个答案: