React - 如何在 useEffect 期间将 React 组件附加到 useRef 组件

Question

我想知道是否有办法将另一个反应组件附加到 useRef 元素？

场景：当Parent的useEffect检测到Child的标题大于X尺寸时：添加另一个反应组件。

我希望在 Parent 上实施，因为在我的整个应用程序中，只有一种特定情况需要我这样做。因此我不想修改核心 Child 组件道具。

import React, { ReactNode, useEffect, useRef } from 'react';
import { css } from 'emotion';

const someStyle = css`
   background-color: red;
`;

type ChildProp = {
    children: ReactNode;
};
const Child = React.forwardRef<HTMLHeadingElement, ChildProp>(
    ({ children }, ref) => {
        return <h1>{children}</h1>;
    },
);

const Parent = React.FunctionComponent = ()=> {
        const childRef = useRef<HTMLHeadingElement>(null);

        useEffect(() => {
            if (childRef.current && childRef.current.clientHeight > 30) {
                // append component to childRef.current
                // e.g. childRef.current.append(<div className={someStyle}>hello</div>);
            }
        }, []);

        return <Child ref={childRef}>hello world</Child>;
};

export default Parent;

Answer 1

您不应手动操作 dom。 React 假设它是唯一一个改变页面的人，所以如果这个假设是错误的，它可能会做出覆盖你的改变，或者跳过它没有意识到它需要做的改变。

相反，您应该设置状态，使组件重新呈现。然后渲染一些与你想要的 dom 相匹配的东西。

const Parent = React.FunctionComponent = ()=> {
  const childRef = useRef<HTMLHeadingElement>(null);
  const [large, setLarge] = useState(false);

  useEffect(() => {
    if (childRef.current && childRef.current.clientHeight > 30) {
      setLarge(true);
    }
  }, []);

  return (
    <React.Fragment>
      <Child ref={childRef}>hello world</Child>
      {large && (<div className={someStyle}>hello</div>)}
    </React.Fragment>
  )
};

P.S：如果您看到此代码出现屏幕闪烁，请考虑将其更改为 useLayoutEffect 而不是 useEffect

React - 如何在 useEffect 期间将 React 组件附加到 useRef 组件

React - how to append react component to useRef component during useEffect

javascript

append

ref

reactjs

use-effect