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

我想知道是否有方法将另一个react组件附加到

useRef

元素

场景：当父级

的
useffect
检测到子级
的标题大于X size时：添加另一个react组件


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


import-React，{ReactNode，useffect，useRef}从'React'导入；
从“情感”导入{css}；
const someStyle=css`
背景色：红色；
`;
类型ChildProp={
子节点：反应节点；
};
const Child=React.forwardRef(
（{children}，ref）=>{
返回{children}；
},
);
const Parent=React.FunctionComponent=（）=>{
const childRef=useRef（null）；
useffect（（）=>{
if（childRef.current&&childRef.current.clientHeight>30）{
//将组件附加到childRef.current
//例如childRef.current.append（hello）；
}
}, []);
返回你好世界；
};
导出默认父对象；
您不应该手动操作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>
  )
};

const Parent=React.FunctionComponent=（）=>{
const childRef=useRef（null）；
const[large，setLarge]=useState（false）；
useffect（（）=>{
if（childRef.current&&childRef.current.clientHeight>30）{
setLarge（真）；
}
}, []);
返回(
你好，世界
{large&&（你好）}
)
};

 s：如果你看到屏幕上闪烁着这个代码，考虑把它改为<代码> UsayayouTffffe>代码>而不是<代码>使用效果< /COD> < /P>你不操纵DOM；使用React可以使用条件呈现：
returnhelloworld{childRef.current.clientHeight>30&&…}