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

Question

I have React component, where I have some dynamic text:

...
let spanLength

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

How can I get the length of text inside span element to a spanLength variable?

Answer 1

Why not, first, compose the whole string? You can grab its length immediately after, and then render it.

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

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

Answer 2

You can add a ref to your span

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

Then the text length would simply be spanRef.current.textContent.length