React - 如何在 useEffect 期间将反应组件附加到 useRef 组件答案

【问题标题】：React - how to append react component to useRef component during useEffectReact - 如何在 useEffect 期间将反应组件附加到 useRef 组件
【发布时间】：2020-10-22 12:27:38
【问题描述】：

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

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

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

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;

【问题讨论】：

你不操作 DOM；使用 React，您可以使用条件渲染：return <Child>hello world {childRef.current.clientHeight > 30 && <div>...</div>}</Child>;

标签： javascript reactjs append ref use-effect

【解决方案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

【讨论】：