如何将锚点添加到 React 动态生成的 Div 列表中？答案

【问题标题】：How to add anchors to a list of Divs generated dynamically by React?如何将锚点添加到 React 动态生成的 Div 列表中？
【发布时间】：2020-09-01 20:14:15
【问题描述】：

我想为 React 中的 map 方法生成的每个 <div> 添加一个锚点。在页面的开头，我也使用map方法生成了一些<a>链接。但是点击<a>链接后发现没有跳转效果。

这是一个代码示例：

import React from "react";
import "./styles.css";

const arr = [
  {
    title: "1"
  },
  {
    title: "2"
  },
  {
    title: "3"
  },
  {
    title: "4"
  }
];

export default function App() {
  return (
    <div className="App">
      {arr.map((item) => (
        <div>
          <a href={`#${item.title}`}>{item.title}</a>
        </div>
      ))}
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <h1>Hello CodeSandbox</h1>
      <h1>Hello CodeSandbox</h1>
      <h1>Hello CodeSandbox</h1>
      <h1>Hello CodeSandbox</h1>
      <h1>Hello CodeSandbox</h1>
      <h1>Hello CodeSandbox</h1>
      <h1>Hello CodeSandbox</h1>
      <h1>Hello CodeSandbox</h1>
      <h1>Hello CodeSandbox</h1>
      <h1>Hello CodeSandbox</h1>
      <h1>Hello CodeSandbox</h1>
      <h1>Hello CodeSandbox</h1>
      {arr.map((item) => (
        <div key={item.title} id={item.title}>
          {item.title}
        </div>
      ))}
    </div>
  );
}

【问题讨论】：

标签： javascript html reactjs ecmascript-6

【解决方案1】：

尝试在您要导航到的 url 之前添加 https:// ！即https://www.google.com

【讨论】：

【解决方案2】：

您可以查看示例here

import React from "react";
// import "./styles.css";

const arr = [
  {
    title: "1"
  },
  {
    title: "2"
  },
  {
    title: "3"
  },
  {
    title: "4"
  }
];

export default function App() {
  return (
    <div className="App">
      {arr.map((item) => (
          <a href={`#${item.title}`}>{item.title}</a>
      ))}
      <div style={{ height: '1100px' }} />
      {arr.map((item) => (
        <a key={item.title} id={item.title} style={{ display:"block", height: '500px' }}>
          {item.title}
        </a>
      ))}
    </div>
  );
}

【讨论】：