reactjs - 如何使用 React JS 在每一行上呈现第 n 列？

Question

我想在 React JS 的每一行 div 中呈现 4 个 div(类为 .col-4)。

这是我已经尝试过的:

 return (
    <Styles>
    <div className="container add-page">
      <input className="add-movie container" type="text" placeholder="Search for movies" value={query} onChange={onChange} />
      </div>
      {results.length > 0 && (
         results.map((movie) => (
         
             if(rows%4===0){
              <div className="row">
                <ResultCard movie={movie} key={movie.id} /> 
               
             }
             rows++;
             if(rows%columns===0){
            </div>}
      
        ))
      )}

    </Styles>
  )

但是，我在使用 if 语句的行中遇到了意外的标记错误。我想这与 JSX 语法有关。

这是 ResultCard 组件返回的样子:

return (
    <React.Fragment>
      <Styles>
        {movie.poster_path ? (
          <div className="col-4">
            <img
              src={`https://image.tmdb.org/t/p/w200/${movie.poster_path}`}
              alt={`${movie.title} Poster`}
              height="300"
              width="200"
            />

            <Button variant="success">Add to Watchlist</Button>
          </div>
        ) : (
          <div className="col-4">
            <img
              src={NotFound}
              height="300"
              width="200"
              alt="Poster not found"
            />
          </div>
        )}
      </Styles>
    </React.Fragment>
  );

基本上，我想要一个行 div 并在该行 div 中呈现 4 个 ResultCard 组件。然后，我想为其他 4 个 ResultCard 组件创建另一个行 div，依此类推。

P.S:我知道这个网站上有几个类似的问题，但在这些问题中，OP 代码的结构使得这些问题的答案解决了他们的问题，但对我不起作用。这就是我在这里问这个问题的原因。

Answer 1

React JSX 不是 HTML，也不是字符串。它被直接翻译成JS。因此，您不能呈现一个开始标签，呈现一堆项目，然后关闭标签。

您必须渲染容器，然后渲染其中的项目。为此，您需要将 results 数组拆分(分 block )为子数组，呈现 .row 容器，然后映射其中的项目。

要分 block 项目，您可以使用 Array.from() 和 Array.slice():

const Demo = ({ results }) => (
  <div>
  {results.length > 0 && (
    Array.from({ length: Math.ceil(results.length / 4) }, (_, i) => (
      <div className="row" key={`row${i}`}>
      {
        results.slice(i * 4, (i + 1) * 4)
          .map((movie) => (
            <div className="card" key={movie}>{movie}</div>
          ))
      }
      </div>
    ))
  )}
  </div>
)

const movies = ['A1', 'B1', 'C1', 'D1', 'A2', 'B2', 'C2', 'D2', 'A3', 'B3', 'C3', 'D3', 'A4', 'B4', 'C4', 'D4'];

ReactDOM.render(
  <Demo results={movies} />,
  root
);

.row {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid gold;
}

.card {
  width: 24%;
  background: silver;
}

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>

一个更简单的选项是将所有项目呈现为列表，并使用 CSS 网格显示它们:

const Demo = ({ results }) => (
  <div className="grid">
  {results.length > 0 && (
    results.map((movie) => (
      <div className="card" key={movie}>{movie}</div>
    ))
  )}
  </div>
)

const movies = ['A1', 'B1', 'C1', 'D1', 'A2', 'B2', 'C2', 'D2', 'A3', 'B3', 'C3', 'D3', 'A4', 'B4', 'C4', 'D4'];

ReactDOM.render(
  <Demo results={movies} />,
  root
);

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 2px;
}

.card {
  background: silver;
}

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>