多个阅读更多按钮同时工作

Question

早上好。

我正在尝试在来自 firestore 的文本上使用“readmore”按钮

<section className="escritos">
  {escritos.map(escrito => {
    return (
      <div>
        <p>
          Autor: <strong>{escrito.autor}</strong>
        </p>
        <p>
          {" "}
          Título: <strong>{escrito.titulo}</strong>
        </p>
        <div id="obras">
          {" "}
          {readmore
            ? parse(escrito.escrito)
            : parse(escrito.escrito.substring(0, 200))}
          <button id="readmore" onClick={() => setReadmore(!readmore)}>
            {readmore ? "ler menos" : "ler mais"}
          </button>
          <Link to="#beginning">
            <BsFillArrowUpCircleFill />
          </Link>
        </div>
        <hr />
      </div>
    );
  })}
</section>

它正在工作。 但它同时适用于所有按钮。

我已经尝试使用react-read-more ，但出现错误，因为我必须使用parse(escrito.escrito)删除 html 标签。 删除解析，它可以工作，但显示标签。

我相信它与map 有关，但我还没有解决它。

这是站点，如果有帮助，这里是存储库。

提前感谢您的关注和时间。

Answer 1

由于您希望将阅读更多readmore应用于各个框，您可以将数组存储在 state 中并检查是否设置了id ，但我会 Z34D1F91FB2E514B8576FAB1A75A89A6B 用更简单的方法：

将您的块提取到它自己的组件中，该组件有自己的readmore阅读更多，如下所示：

<section className="escritos">
  {escritos.map(escrito => (
     <Escrito escrito={escrito} key={escrito.id} />
   ))}
</section>

// Escrito.jsx
const Escrito = ({escrito}) => {
    const [readmore, setReadmore] = useState(false);
    return (
      <div>
        <p>
          Autor: <strong>{escrito.autor}</strong>
        </p>
        <p>
          {" "}
          Título: <strong>{escrito.titulo}</strong>
        </p>
        <div id="obras">
          {" "}
          {readmore
            ? parse(escrito.escrito)
            : parse(escrito.escrito.substring(0, 200))}
          <button id="readmore" onClick={() => setReadmore(!readmore)}>
            {readmore ? "ler menos" : "ler mais"}
          </button>
          <Link to="#beginning">
            <BsFillArrowUpCircleFill />
          </Link>
        </div>
        <hr />
      </div>
    );
}

export default Escrito;

由于每个组件现在都有自己的 state，这应该是您想要的行为。

Answer 2

从escritos.map(escrito => {JSX})返回的父元素应该包含一个具有唯一值的键属性。 在这里阅读更多