时间戳

首页 > 解决方案 > 如何在锚标记内输出项目值

reactjs - 如何在锚标记内输出项目值

问题描述

从 API 获取的数据存储在GetBlogState中。在数据中有一个用于 Slug 的键。我想在锚标记内输出该键值，以便它为该特定博客文章建立一个链接，例如 /blog/test-1。以下是我目前正在使用的。

   GetBlogState.map((item, index) => (
      <div className="h-68" key={index}>
        ..
        <h2 className="font-bold mb-5 text-xl"><a href="/blog/{item.Slug}" className="hover:underline">{ item.Title }</a></h2>
        ..
      </div>
    ))

标签： reactjs

解决方案

在 js 中，您可以使用模板字符串直接在字符串中注入变量，如下所示。模板字符串使用反引号、键盘上 1 键左侧的字符以及变量名周围的 ${} 完成：

   GetBlogState.map((item, index) => (
      <div className="h-68" key={index}>
        ..
        <h2 className="font-bold mb-5 text-xl"><a href=`/blog/${item.Slug}` className="hover:underline">{ item.Title }</a></h2>
        ..
      </div>
    ))

推荐阅读