使用 Reactjs 动态构建 Netflix 页脚答案

【问题标题】：Build Netflix footer dynamically with Reactjs使用 Reactjs 动态构建 Netflix 页脚
【发布时间】：2022-01-15 10:17:36
【问题描述】：

我正在尝试使用 Reactjs 和样式化组件动态构建 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 规则。谢谢

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

可能有益的一件事是分离关注点。创建一个单独的组件，一次处理一列。

在我的例子中，我创建了一个 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>
  );
};

之后，对你的元素应用一些样式，在我的例子中，我使用的是tailwindCSS，你应该让你的列显示链接。

输出：

供参考：

Array.prototype.slice()

【讨论】：