從上到下動態創建反應表

Question

問題：我正在嘗試創建一個按列映射的表組件。 之前的所有問題我都在尋找地圖行，考慮到數據的格式，我無法做到。 我正在添加一個數據示例和我所做的“周轉”。

數據：

{
"Title": "The Avengers",
"Year": "2012",
"imdbID": "tt0848228",
"Type": "movie",
"Poster": "https://m.media-amazon.com/images/M/MV5BNDYxNjQyMjAtNTdiOS00NGYwLWFmNTAtNThmYjU5ZGI2YTI1XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX300.jpg"
},
{
"Title": "Avengers: Infinity War",
"Year": "2018",
"imdbID": "tt4154756",
"Type": "movie",
"Poster": "https://m.media-amazon.com/images/M/MV5BMjMxNjY2MDU1OV5BMl5BanBnXkFtZTgwNzY1MTUwNTM@._V1_SX300.jpg"
},
{
"Title": "Avengers: Endgame",
"Year": "2019",
"imdbID": "tt4154796",
"Type": "movie",
"Poster": "https://m.media-amazon.com/images/M/MV5BMTc5MDE2ODcwNV5BMl5BanBnXkFtZTgwMzI2NzQ2NzM@._V1_SX300.jpg"
},
{
"Title": "Avengers: Age of Ultron",
"Year": "2015",
"imdbID": "tt2395427",
"Type": "movie",
"Poster": "https://m.media-amazon.com/images/M/MV5BMTM4OGJmNWMtOTM4Ni00NTE3LTg3MDItZmQxYjc4N2JhNmUxXkEyXkFqcGdeQXVyNTgzMDMzMTg@._V1_SX300.jpg"
},
{
"Title": "The Avengers",
"Year": "1998",
"imdbID": "tt0118661",
"Type": "movie",
"Poster": "https://m.media-amazon.com/images/M/MV5BYWE1NTdjOWQtYTQ2Ny00Nzc5LWExYzMtNmRlOThmOTE2N2I4XkEyXkFqcGdeQXVyNjUwNzk3NDc@._V1_SX300.jpg"
},
{
"Title": "The Avengers: Earth's Mightiest Heroes",
"Year": "2010–2012",
"imdbID": "tt1626038",
"Type": "series",
"Poster": "https://m.media-amazon.com/images/M/MV5BYzA4ZjVhYzctZmI0NC00ZmIxLWFmYTgtOGIxMDYxODhmMGQ2XkEyXkFqcGdeQXVyNjExODE1MDc@._V1_SX300.jpg"
},
{
"Title": "Ultimate Avengers: The Movie",
"Year": "2006",
"imdbID": "tt0491703",
"Type": "movie",
"Poster": "https://m.media-amazon.com/images/M/MV5BMTYyMjk0NTMwMl5BMl5BanBnXkFtZTgwNzY0NjAwNzE@._V1_SX300.jpg"
},
{
"Title": "Ultimate Avengers II",
"Year": "2006",
"imdbID": "tt0803093",
"Type": "movie",
"Poster": "https://m.media-amazon.com/images/M/MV5BZjI3MTI5ZTYtZmNmNy00OGZmLTlhNWMtNjZiYmYzNDhlOGRkL2ltYWdlL2ltYWdlXkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_SX300.jpg"
},
{
"Title": "The Avengers",
"Year": "1961–1969",
"imdbID": "tt0054518",
"Type": "series",
"Poster": "https://m.media-amazon.com/images/M/MV5BZWQwZTdjMDUtNTY1YS00MDI0LWFkNjYtZDA4MDdmZjdlMDRlXkEyXkFqcGdeQXVyNjUwNzk3NDc@._V1_SX300.jpg"
},
{
"Title": "Avengers Assemble",
"Year": "2013–2019",
"imdbID": "tt2455546",
"Type": "series",
"Poster": "https://m.media-amazon.com/images/M/MV5BMTY0NTUyMDQwOV5BMl5BanBnXkFtZTgwNjAwMTA0MDE@._V1_SX300.jpg"
}

JSX 摘錄：

     <div style={{ display: "flex", flexDirection: "row" }}>
        <div style={{ marginRight: "15px", listStyleType: "none" }}>
          <li>{db.year}</li>
          <li>{db.Title}</li>
          <li>{db.Type}</li>
        </div>
        <div
          style={{
            display: "flex",
            flexDirection: "row",
            listStyleType: "none",
          }}
        >
          {map.map((mapa) => (
            <div
              key={mapa.imdbID}
              style={{
                display: "flex",
                flexDirection: "column",
                marginRight: "15px",
              }}
            >
              <li>{mapa.Year}</li>
              <li>{mapa.Title}</li>
              <li>{mapa.Type}</li>
            </div>
          ))}
        </div>
      </div>

問題：雖然這可以按我的意願正常工作，但出現了行溢出問題。 如下圖所示，您可以看到標題行數據值溢出到下一行。 我可以動態更改字體大小並分散數據以避免這種情況，但這似乎不是解決方案，而不是“周轉”。 我希望通過提出這個問題來實現更好的方法。 我試着到處尋找，但每個問題都通過創建一個行組件來解決。

圖片：

Answer 1

我認為您需要更改一些值。 查看此鏈接以了解如何使用帶有滾動條的表格

Answer 2

我在代碼沙箱中做了一個例子。 要獲得文本換行，您需要提供樣式：

<td style={{ display: "flex", width: "xxx" }}></td>

對於每個單元格的行組件。 是的，你無法避免使用<tr /> <td /> <th />