使用Reactjs動態構建Netflix頁腳

我正在嘗試使用 Reactjs 和 styled-components 動態構建 Netflix 的頁腳，但我不知道該怎么做。請任何幫助:)

我在 links.json 檔案中創建了鏈接

[
  {
    "id": 1,
    "link": "FAQ"
  },
  {
    "id": 2,
    "link": "Investor Relations"
  },
  {
    "id": 3,
    "link": "Privacy"
  },
  {
    "id": 4,
    "link": "Speed Test"
  },
  {
    "id": 5,
    "link": "Help Center"
  },
  {
    "id": 6,
    "link": "Jobs"
  },
  {
    "id": 7,
    "link": "Cookie Preferences"
  },
  {
    "id": 8,
    "link": "Legal Notices"
  },
  {
    "id": 9,
    "link": "Account"
  },
  {
    "id": 10,
    "link": "Ways to Watch"
  },
  {
    "id": 11,
    "link": "Coorporate Information"
  },
  {
    "id": 12,
    "link": "Only on Netflix"
  },
  {
    "id": 13,
    "link": "Media Center"
  },
  {
    "id": 14,
    "link": "Terms of use"
  },
  {
    "id": 15,
    "link": "Contact US"
  }
]

然后在我的頁腳組件中，我嘗試執行過濾器和映射功能，但我無法實作代碼：在 ul 標記內每列僅顯示 4 個專案:(((

import React from 'react'
import linksData from '../fixtures/links' 
import './Footer.css'

function Footer() {
  return (
    // <div>
    //   {linksData
    //     .filter()
    //     .map((item, index)=>(
    //     <li key={index}>{item.link}</li>
    //   )
    //   )}
    // </div>

      
    <div className="site-footer-wrapper">
      <div className="site-footer">
        <p className="footer-top">
          <a className='footer-top-a' href> Questions? Contact US</a>
        </p>
        <ul className='footer-links'>
          <li className='footer-link-item'>FAQ</li>
          <li className='footer-link-item'>Investor Relations</li>
          <li className='footer-link-item'>Privacy</li>
          <li className='footer-link-item'>Speed Test</li>
        </ul>
        <ul className='footer-links'>
          <li className='footer-link-item'>FAQ</li>
          <li className='footer-link-item'>Investor Relations</li>
          <li className='footer-link-item'>Privacy</li>
          <li className='footer-link-item'>Speed Test</li>
        </ul>
        <ul className='footer-links'>
          <li className='footer-link-item'>FAQ</li>
          <li className='footer-link-item'>Investor Relations</li>
          <li className='footer-link-item'>Privacy</li>
          <li className='footer-link-item'>Speed Test</li>
        </ul>
      </div>
    </div>
  )
}

export default Footer

請幫助我如何做到這一點，無論是使用 map() 函式還是使用 CSS 規則。謝謝

uj5u.com熱心網友回復：

可能有益的一件事是分離關注點。創建一個單獨的組件，一次處理一列。

在我的例子中，我創建了一個 Column 組件，它回傳一個“ul”JSX 標記并根據作為道具接收的 linksToDisplay 陣列顯示“li”JSX 標記。

const Column = ({ linksToDisplay, key }) => (
   <ul key={key} className='px-4'>
      {linksToDisplay.map((item) => (
         <li key={item.id}>{item.link}</li>
      ))}
   </ul>
);

然后，我使用 Footer 組件中的 Column 組件根據設定的條件顯示列。

const Footer = () => {
  return (
    <div className='container mx-auto flex px-2 lg:px-5 py-24 h-screen 
    items-center justify-center flex-row'>
       {links.map((link, index) => {
          // So you get a new column after 4 items have been displayed
          if (index % 4 === 0) {
            // Array.slice to get the next 4 links in the array
            const nextFourLinks = links.slice(index, index   4);
            return <Column key={link.id} linksToDisplay={nextFourLinks} 
             />;
          }
       })}
    </div>
  );
};

之后，對你的元素應用一些樣式，在我的例子中，我使用的是

以供參考：

Array.prototype.slice()

標籤：

上一篇：降價不是一個功能

下一篇：使用UCS-2編碼解碼Base64