如何獲取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

您可以在span添加ref

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

然后，文本長度將只是spanRef.current.textContent.length