根据内容高度动态添加React元素 [英] Add React elements dynamically depending on the content height

问题描述

我有一个博客文章页面，其中包含一个名为 PostContent 的组件，其中包含该帖子的文本.我要实现的是根据其长度在此 PostContent 的段落之间动态添加一些内容.我将通过介绍提到的内容(其视口高度为1.5倍)来做到这一点.

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.

我的问题是我无法计算距离.我正在使用 https://www.npmjs.com/package/html-react-parser，但是我不能使用它访问DOM Elements的 offsetHeight 属性，我想知道该元素与容器元素顶部之间的距离.

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?

谢谢！

我们假设视口高度为100px，文章内容为2000px，所以我想每200px(视口高度的2倍)添加一个元素.

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>

为此，我需要遍历 article 的所有段落，以便访问每个段落的 offsetHeight .这样，我就知道我离容器有多远.因此，我总是将offsetHeight添加为200px的倍数来添加所需的元素，对吧?

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>

推荐答案

如果我正确理解了这个问题，我认为，您可以使用react useRef 挂钩.

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>
)

在这里，我们将 ref 元素分配给帖子内容包装器div.

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

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>
  );
}

这篇关于根据内容高度动态添加React元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！