Question

我正在尝试使用map方法连续显示3列，但未显示。

import React, { Component } from "react";
import _ from "lodash";


const MoviesGrid = props => {
  const { movies } = props;

  const chunked = _.chunk(movies, 3);

  return chunked.map(i => (
    <div className="row-movies" key={i}>
      {i.map(movie => (
        <div className="col-movies" key={movie.id}>
          {
            <ul key={movie._id}>
              <li>{movie.title}</li>
              <li>{movie.genre.name}</li>
              <li>{movie.numberInStock}</li>
              <li>{movie.dailyRentalRate}</li>
            </ul>
          }
        </div>
      ))}
    </div>
  ));
};

export default MoviesGrid;

它在服务器上显示9行。

Answer 1

我在这里没有问题，也许可以尝试移除{ }周围的<ul>？

const movies = [
  {title: 'Movie 1', genre: {name: 'Comedy'}, numberInStock: 1, dailyRentalRate: 1},
  {title: 'Movie 2', genre: {name: 'Comedy'}, numberInStock: 1, dailyRentalRate: 1},
  {title: 'Movie 3', genre: {name: 'Action'}, numberInStock: 1, dailyRentalRate: 1},
  {title: 'Movie 4', genre: {name: 'SF'}, numberInStock: 1, dailyRentalRate: 1},
]


const MoviesGrid = props => {
  const { movies } = props;

  const chunked = _.chunk(movies, 3);

  return chunked.map(i => (
    <div className="row-movies" key={i}>
      {i.map(movie => (
        <div className="col-movies" key={movie.id}>
          <ul key={movie._id}>
            <li>{movie.title}</li>
            <li>{movie.genre.name}</li>
            <li>{movie.numberInStock}</li>
            <li>{movie.dailyRentalRate}</li>
          </ul>
        </div>
      ))}
    </div>
  ));
};

ReactDOM.render(<MoviesGrid movies={movies} />, document.getElementById('app'))

.row-movies {
  display: flex;
  width: 100%;
}

.col-movies {
  flex: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>

<div id="app"></div>

在reactjs的1行中显示3列

1 个答案: