在Reactjs中映射后如何顯示彼此相鄰的列？-有解無憂

我有這段代碼可以從陣列中映射和顯示我網站的帖子。

import articleContent from '../data/articleContent';

const ArticlesList = () => (
  <>
    <ArticlesStyle>
      <h1 className="article-h1">Nasze artyku?y</h1>
        {articleContent.map((article, key) =>
          <Link className="article-link" key={key} to={`/artykul/${article.name}`}>  
            <Row className="align-items-center text-center">
              <Col xs={4} md={5}>
                <h2 style={{ color: '#14B2E6' }}>{article.title}</h2>
              </Col>
            </Row>
            <Row className="align-items-center text-center">  
              <Col className="text-left" xs={8} md={5}>
                <p style={{ color: 'black' }}>{article.content[0].substring(0, 150)}...</p>
              </Col>
            </Row>
          </Link>
        )}
    </ArticlesStyle>
  </>
)

我的目標是在 PC 顯示幕上自動顯示一行中的兩個帖子（我猜是連續兩列），并在移動設備上連續顯示一個帖子。我試圖進行一些小的調整以使其作業，但我現在一無所知。

這是它現在在 PC 上的樣子，我無法擺脫這個標記區域- 我認為這是一個與display: flex;相關的問題。.

在 Reactjs 中映射后如何顯示彼此相鄰的列？

uj5u.com熱心網友回復：

您可以為此使用 CSS 網格。對于 web，設定第 2 列的數量，然后通過在 CSS 中使用媒體查詢，您可以在移動寬度的情況下設定第 1 列的數量。

uj5u.com熱心網友回復：

好的，所以我設法解決了我自己的問題。

首先，我添加了外部（外部到 .map 函式）Row 和 Col。我將 .map 函式中的所有內容都包裝到了 Container 中。

const ArticlesList = () => (
  <>
    <ArticlesStyle>
      <Row>
        <Col className="article-list-grid">
          {articleContent.map((article, key) =>
            <Container className="wrapper">
              <Link className="article-link" key={key} to={`/artykul/${article.name}`}>  
                <Row className="align-items-center text-center">
                  <Col xs={true} md={true}>
                    <h2 style={{ color: '#14B2E6' }}>{article.title}</h2>
                  </Col>
                </Row>
                <Row className="align-items-center text-center">  
                  <Col xs={true} md={true}>
                    <p style={{ color: 'black' }}>{article.content[0].substring(0, 150)}...</p>
                  </Col>
                </Row>
              </Link>
            </Container>
          )}
        </Col>
      </Row>
    </ArticlesStyle>
  </>
)

之后，一切都變成了這樣的樣式：

const ArticlesStyle = styled.div`
    .article-list-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .wrapper {
        @media (max-width: 600px) {
            flex: 100%;
        }
        @media (min-width: 900px) {
            flex: 50%;
        }
    }

    .article-link {
        text-decoration: none;
    }
`;

這里最重要的事情是flex：在 PC 螢屏上50%導致連續 2 列。現在一切看起來都是我想要的：

個人電腦

在 Reactjs 中映射后如何顯示彼此相鄰的列？

移動的

在 Reactjs 中映射后如何顯示彼此相鄰的列？

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/387439.html

標籤：反应推特引导反应引导

上一篇：Unity Shader - 水體互動

下一篇：如何將此JSON轉換為DataFrame？