如何获取React组件中文本的长度

Question

我有React组件，其中有一些动态文本：

...
let spanLength

return(
  <SomeComp>
     ...
     <span>Some static text: {someDynamicText}, {someAnotherText}</span>
     ...
  </SomeComp>
)

如何将span元素内的文本长度转换为spanLength变量？

Answer 1

为什么不首先组成整个字符串？您可以在之后立即获取其长度，然后进行渲染。

const spanStr = `Some static text: ${someDynamicText}, ${someAnotherText}`;
const spanLength = spanStr.length;

return(
  <SomeComp>
     ...
     <span>{spanStr}</span>
     ...
  </SomeComp>
)

Answer 2

您可以将ref添加到span

let spanRef = React.createRef()
...
<span ref={spanRef}>Some static text: {someDynamicText}, {someAnotherText}</span>

然后，文本长度将简单地为spanRef.current.textContent.length