如何在React中设置独立链接的样式

Question

有人能帮帮我吗？我在页脚有2个列链接菜单，每个列有4个链接。每个链接都有一个从1到8的id。对于链接5到8，我想在文本前面添加一个自定义图标/png。

应该是这样的：

主(旗)英格兰

约(旗)苏格兰

服务(旗)威尔士

联系(国旗)北爱尔兰

有没有一种方法可以不需要大量的方法就能正确地完成呢？非常感谢！

Answer 1

为此，可以使用索引。检查索引是否大于3，然后返回带有图像的JSX，如果不返回JSX，则不返回图像.。

示例代码：

import React, { useState } from "react";

const App = ({ ...props }) => {
  const [links, setlinks] = useState([1, 2, 3, 4, 5, 6, 7, 8]);

  return (
    <div>
      {links.map((link, index) => (
        <div>
          {index > 3 ? (
            <div>
              <a>{link}</a>
               <img src="YOUR IMAGE" /> 
            
            </div>
          ) : (
            <a>{link}</a>
          )}
        </div>
      ))}
    </div>
  );
};

export default App;