如何使用单个列表渲染带图标和名称的导航栏？svg导入报错如何解决

核心问题原因 #

• 静态资源导入语法错误：React中导入svg、png等静态资源需要使用默认导入语法，你当前使用的具名导入（带花括号）会尝试从svg文件中读取同名导出变量，而svg文件本身不存在这类导出，因此触发编译报错。
• 导航配置结构错误：你给navigation数组每一项的img字段赋值为{home}格式的对象，后续渲染时img标签的src属性接收的是对象而非资源路径，会导致图片无法正常加载。
• 额外注意：列表渲染需要给每个循环项加唯一key属性，否则会触发React运行时警告。

修正后可运行代码 #

// 导入改为默认导入，去掉花括号
import home from './img/home.svg'
import portfolio from './img/portfolio.svg'
import resume from './img/resume.svg'
import contact from './img/contact.svg'

const navigation = [
  // img字段直接赋值导入的资源变量，不要套花括号
  {img: home, link: "Home"},
  {img: portfolio, link: "Portfolio"},
  {img: resume, link:"Living Resume"},
  {img: contact, link: "Contact"}
]

function Navbar (props){
  const links = props.navlinks;
  // 循环项新增key属性
  const navList = links.map((link, index)=> <li key={index}>
    <a href={link.link}>
      <img src={link.img} alt = {link.link}/>
       {link.link}
       </a>
       </li>)
  return(
    <nav className="fixed navbar-1">
      <div className="text-center m-3 h-2/6">
        <a href="/" className="logo -space-y-3 ">
          <p>J</p>
          <p className="ml-4">W</p>
        </a>
      </div>
      <ul className="space-y-8">
      {navList}
      </ul>
    </nav>
  );
}

function App() {
  return (
   <>
   <Navbar navlinks={navigation}/>
   </>
  );
}

export default App;

你想要通过配置数组循环渲染导航栏的实现方式完全可行，属于React列表渲染的标准实践，本身没有逻辑问题。

内容的提问来源于stack exchange，提问作者Jamie Williams