用户在地图内反应路由器

Question

我想使用react-router（必须使用2.8.1）在列表中呈现内容（使用map）。

但是，如果我在{this.props.children}之外显示.map，则会及时呈现一个。{/ p>

我需要它在列表条目下显示内联/。

我怎样才能做到这一点？

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      movies: x.movies
    };
  }
  render() {
    return (
      <div>
        <h2>Repos</h2>
        {x.movies.map(movie =>
          <span key={movie.id}>
            {movie.name}
            <NavLink to={"/repos/" + movie.id + "/next"}>React Router</NavLink>
          </span>
        )}
        {this.props.children}
      </div>
    );
  }
}

Answer 1

您正在循环中呈现children，我认为这会导致在每个条目之间显示额外的Next Id:4。

尝试以下方法，将孩子们渲染到循环之外。

{
  x.movies.map(movie => (
        <span>
        <Result key={movie.id} result= {movie}/>
        </span>
      ))
}
<span>{this.props.children}</span>