javascript - React - how to append react component to useRef component during useEffect - Stack Overflow

admin管理员组

文章数量:1389812

I would like to know if there is a way to append another react ponent to the useRef element?

Scenario: when the Parent's useEffect detects the Child's heading to be bigger than X size: add another react ponent.

• I would like the implementation to be on the Parent, because in my whole app, there was only one specific case where I need to do this. Therefore I did not want to modify the core Child ponent 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 ponent to childRef.current
                // e.g. childRef.current.append(<div className={someStyle}>hello</div>);
            }
        }, []);

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

export default Parent;

I would like to know if there is a way to append another react ponent to the useRef element?

Scenario: when the Parent's useEffect detects the Child's heading to be bigger than X size: add another react ponent.

• I would like the implementation to be on the Parent, because in my whole app, there was only one specific case where I need to do this. Therefore I did not want to modify the core Child ponent 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 ponent to childRef.current
                // e.g. childRef.current.append(<div className={someStyle}>hello</div>);
            }
        }, []);

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

export default Parent;

• javascript
• reactjs
• append
• ref
• use-effect

Share Improve this question Follow asked Jul 2, 2020 at 0:44 Jacky LamJacky Lam 7722 gold badges22 silver badges77 bronze badges 1

• You don't manipulate the DOM; with React you use conditional rendering: return <Child>hello world {childRef.current.clientHeight > 30 && <div>...</div>}</Child>; – user5734311 Commented Jul 2, 2020 at 0:50

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

You should not manually manipulate the dom. React makes the assumption that it's the only one changing the page, so if that assumption is false it may make changes which overwrite yours, or skip changes that it doesn't realize it needs to do.

Instead, you should set state, causing the ponent to rerender. Then render something that matches what you want the dom to look like.

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: If you see the screen flicker with this code, consider changing it to useLayoutEffect instead of useEffect

本文标签： javascriptReacthow to append react component to useRef component during useEffectStack Overflow