如何在 react.js 中编写好的锚点

Question

我在 React js 中有代码，但是用 href 编写锚点是个问题。形成下面代码的例子

import React from "react";

function Browser() {
  return (
    <div>
      <section className="flex bg-gray-100 py-16 px-4" id="browse-the-room">
        <div className="container mx-auto">
          <div className="flex flex-start mb-4">
            <h3 className="text-2xl capitalize font-semibold">
              browse the room <br className="" />
              that we designed for you
            </h3>
          </div>
          <div className="grid grid-rows-2 grid-cols-9 gap-4">
            <div className="relative col-span-9 row-span-1 md:col-span-4 card" style={{ height: "180px" }}>
              <div className="card-shadow rounded-xl">
                <img src="./images/content/image-catalog-1.png" alt="" className="w-full h-full object-cover object-center overlay overflow-hidden rounded-xl" />
              </div>
              <div className="overlay left-0 top-0 bottom-0 flex justify-center flex-col pl-48 md:pl-72">
                <h5 className="text-lg font-semibold">Living Room</h5>
                <span className="">18.309 items</span>
              </div>
              <a href="details.html" className="stretched-link"></a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default Browser;

但是当我使用带 href 的锚点时他们会发出警告

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in src\components\Browser.js
  Line 23:15:  Anchors must-have content and the content must be accessible by a screen reader  jsx-a11y/anchor-has-content
  Line 33:15:  Anchors must-have content and the content must be accessible by a screen reader  jsx-a11y/anchor-has-content
  Line 43:15:  Anchors must have content and the content must be accessible by a screen reader  jsx-a11y/anchor-has-content
  Line 53:15:  Anchors must have content and the content must be accessible by a screen reader  jsx-a11y/anchor-has-content

webpack compiled with 1 warning

我能解决这个问题吗？请帮我解决这个问题

Answer 1

将内容放在 link 中，以便人们：

有东西可以点击
知道 link 会带他们去哪里

<a href="foo">Visit Foo</a>

Answer 2

基本上您将锚点留空并且它的可访问性很差。我建议你在标签中加入一些文字

如何在 react.js 中编写好的锚点

how to write good anchors in react.js

html

javascript

jsx

reactjs