reactjs - 如何在页脚设置中添加唯一键？

Question

这是我的footer.tsx。

我无法在以下组件中设置唯一键。

如何以不同的方式简化此页脚？

import React from "react";
import {
  Container,
  Row,
  Col,
  InputGroup,
  FormControl,
  Button,
} from "react-bootstrap";
import "./footer.scss";
import { Link } from "react-router-dom";

type footerLinks = {
  [x: string]: string[];
};

const footerLinks = {
  footer1: [
    "Browse Experts",
    "Emergency",
    "Services",
    "Name My Price",
    "Recurring Services",
    "Service Packages",
    "Gurantees & Terms of use",
  ],
  footer2: [
    "Log in",
    "Join Our Network",
    "Resource Center",
    "Contractor Leads",
    "Terms & Conditions",
  ],
  footer3: [
    "Contact Us/Customer Care",
    "How it works",
    "FAQs",
    "Screening Process",
    "About the company",
  ],
  footer4: [
    "Handyman",
    "Cleaning",
    "Removalists",
    "Gardening",
    "Automotive",
    "All Sesrvices",
  ],
};

export default function Footer() {
  return (
    <footer className="dark-bg pt-7">
      <Container className="pb-5">
        <Row>
          {/* Footer 1 Start */}
          <Col lg={2} sm={6}>
            <h6 className="footer-title">Service Seekers</h6>
            <ul className="footer-links">
              {footerLinks.footer1.map((link) => (
                <li>
                  <Link
                    to={{
                      pathname: "/",
                    }}
                  >
                    {link}
                  </Link>
                </li>
              ))}
            </ul>
          </Col>
          {/* Footer 1 End */}

          {/* Footer 2 Start */}
          <Col lg={2} sm={6}>
            <h6 className="footer-title">For Service Expert</h6>
            <ul className="footer-links">
              {footerLinks.footer2.map((link) => (
                <li>
                  <Link
                    to={{
                      pathname: "/",
                    }}
                  >
                    {link}
                  </Link>
                </li>
              ))}
            </ul>
          </Col>
          {/* Footer 2 End */}

          {/* Footer 3 Start */}
          <Col lg={2} sm={6}>
            <h6 className="footer-title">About Expertibly</h6>
            <ul className="footer-links">
              {footerLinks.footer3.map((link) => (
                <li>
                  <Link
                    to={{
                      pathname: "/",
                    }}
                  >
                    {link}
                  </Link>
                </li>
              ))}
            </ul>
          </Col>
          {/* Footer 3 End */}

          {/* Footer 4 Start */}
          <Col lg={2} sm={6}>
            <h6 className="footer-title">Popular Services</h6>
            <ul className="footer-links">
              {footerLinks.footer4.map((link) => (
                <li>
                  <Link
                    to={{
                      pathname: "/",
                    }}
                  >
                    {link}
                  </Link>
                </li>
              ))}
            </ul>
          </Col>
          {/* Footer 4 End */}

          {/* Footer 5 Start */}
          <Col lg={4}>
            <h6 className="footer-title">Join Our Newsletter</h6>
            <div className="pt-3">
              <InputGroup className="mb-3">
                <FormControl
                  placeholder="Your Email Address"
                  aria-label="Your Email Address"
                  aria-describedby="basic-addon2"
                  className="rounded-0 border-0"
                />
                <InputGroup.Append>
                  <Button className="rounded-0 border border-primary">
                    Join Expertibly
                  </Button>
                </InputGroup.Append>
              </InputGroup>
            </div>
          </Col>
          {/* Footer 5 End */}
        </Row>
      </Container>
      <div className="py-3 text-white text-center footer-caption">
        @2020 EXPERTIBLY. All Right Reserved
      </div>
      <div className="footer-chat-icon"></div>
    </footer>
  );
}

标签： reactjs

Answer 1

map 方法接受一个可选参数 index，它是数组中正在处理的当前元素的索引。你可以像这样在你的地图方法中传递它。

 {footerLinks.footer1.map((link, index) => (
     <li>
       <Link
         to={{
           pathname: "/",
             }}
           key={index}
         >
        {link}
      </Link>
      </li>
   ))}