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

Question

早上好。

我正在尝试对来自 firestore 的文本使用“阅读更多”按钮

<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 标签。删除解析，它可以工作，但显示标签。

我相信和地图有关，但我还没能解决。

如果对您有帮助，请点击这里site and here's the repository。

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

Answer 1

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

Answer 2

由于您希望将 readmore 状态应用于各个框，您可以在状态中存储一个数组并检查是否设置了 id，但我会选择 (在我看来）更简单的方法：

将您的块提取到它自己的组件中，该组件具有自己的状态 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;

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

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

Multiple readmore buttons working at the same time

javascript

reactjs

map-function