Add React elements dynamically depending on the content height

问题

I have a blog post page, which have a component named PostContent that contains the text of the post. What I want to achieve is to dynamically add some content among the paragraphs of this PostContent depending on its length. I will do that by introducing the mentioned content with a distance of 1.5x viewport's height.

The problem I have is I cannot calculate the distance. I am using https://www.npmjs.com/package/html-react-parser but I cannot access to the offsetHeight property of the DOM Elements with that, which I want to know at what distance the element is from the top of the container element.

Is there a better/alternative way to achieve what I want?

Thanks!

Let's assume the viewport height is 100px and the post content 2000px, so I want to add an element every 200px (2x viewport's height).

<article>
 <p>This is the first example paragraph of 10px</p>
 <p>This is the second example paragraph of 10px</p>
  // ...
 <p>This is the twentieth example paragraph of 10px</p>
// ...
</article>

To do so, I'd need to iterate over all the paragraphs of the article in order to access to the offsetHeight of each one. That way, I'd know how far I am from the container. Hence, I'd add the wanted element always that offsetHeight is a multiple of 200px, right?

<article>
 <p>This is the first example paragraph of 10px</p>
 <p>This is the second example paragraph of 10px</p>
  // ...
 <p>This is the twentieth example paragraph of 10px</p>
 <!-- Here I would insert the first element,
      as it would be at 200px from the container (article).
  -->

 // .... same applies with the rest of the article ....
</article>

回答1:

If I understand the problem correctly, I think, You could use react useRef hook.

const ref = useRef(null)
const [contentLength, setContentLength] = useState();

useEffect(() => {
   if (ref && ref.current) {
       const { current } = ref;
       setContentLength(current.offsetHeight);
   }
}, [ref])

return (
 <div ref={ref}>{content_here}</div>
)

Here we assigned the ref element to the post content wrapper div.

Edited:

import React, { useRef, useEffect } from 'react';

const paragraph = [
  'lorem ipsum dolor sit amet',
  'lorem ipsum dolor sit amet',
  'lorem ipsum dolor sit amet',
  'lorem ipsum dolor sit amet',
  'lorem ipsum dolor sit amet',
  'lorem ipsum dolor sit amet',
  'lorem ipsum dolor sit amet',
];

export function Main() {
  function Paragraph({ text, renderAdditionalElement }) {
    const ref = useRef(null);

    useEffect(() => {
      if (ref && ref.current) {
        const { offsetTop } = ref.current;
        if (offsetTop % 200 === 0) {
          renderAdditionalElement();
        }
      }
    }, [ref]);

    return <p ref={ref}>{text}</p>;
  }

  const renderAdditionalElement = () => <div />;

  return (
    <article>
      {paragraph.map(p => (
        <Paragraph text={p} renderAdditionalElement={renderAdditionalElement} />
      ))}
    </article>
  );
}

来源：https://stackoverflow.com/questions/65367963/add-react-elements-dynamically-depending-on-the-content-height

标签

javascript

html

reactjs

dom