javascript - 刷新特定DIV

Question

我正在创建一个票务系统，有时票务内容太长，我只想显示其中的一部分(前 172 个字符) - 我这样做没有真正的问题，以查看完整的内容(同时页面)我正在创建 href用于切换文本(显示更多/更少)，并且我想显示完整内容或仅部分内容。

但是我找不到办法。现在，当我提取票证数据时，我将其显示如下:

{ticket.content.length !==0? <div id='content' className='meta-data'>{ticket.content.substr(0, this.state.short_content)}</div> : null}

后面是:

<div id='showing' onClick={this.showMore} className={ticket.id}>Show More</div>

功能:

showMore = () => {
        var txt_swapper = document.getElementById("showing");
        var full_txt = document.getElementById("content");
        var full_content = full_txt!.innerHTML;
        if (txt_swapper!.innerHTML === "Show More") {
            txt_swapper!.innerHTML = "Show Less";
            this.state.short_content=999;
            full_txt!.innerHTML=full_content;
        } else {
            txt_swapper!.innerHTML = "Show More";
            this.state.short_content=172;
        }
    }

我尝试遵循这里的一些指南，但所有指南都发送到 JQuery，我认为我不需要使用它。如何使用 javascript typescript 或 HTML 刷新特定 DIV(或更准确地说是我的“内容”DIV)？

Answer 1

您正在尝试在 React 中进行 DOM 操作。这几乎从来都不是正确的做事方式。

只需根据您是否想要显示完整的票证切换状态变量，然后根据该状态进行渲染。

在 React 中，你不应该直接操作 DOM；相反，您操纵数据，并且您的组件对这些数据更改使用react。

function Ticket({ content, truncateLength }) {
  const [showFull, setShowFull] = React.useState(false);
  const toggleText = showFull ? "Show Less" : "Show More";

  const visibleContent = showFull ? content : content.substr(0, truncateLength);

  return (
    <div ticket>
      <p>{visibleContent}</p>
      <span
        style={{ textDecoration: "underline", cursor: "pointer" }}
        onClick={() => setShowFull(!showFull)}
      >
        {toggleText}
      </span>
    </div>
  );
}

Here's a sandbox link让您看到它的实际效果。