javascript - How to use TypeScript and forwardRef in ReactJS? - Stack Overflow

admin管理员组

文章数量:1300004

I'm having a problem when using forwardRef with TypeScript.

What I want? pass a typed ref to the child ponent.

What am I getting value of console.log - child ponent null

Code for parent ponent

  // ponent parent
  import { FormHandles } from '@unform/core';

  export const App = () => {
    const formRef = createRef<FormHandles>();

    return (
      <Child ref={formRef} />
    )
  }

Code for child ponent

  // ponent child
  import { FormHandles } from '@unform/core';

  export const Child = forwardRef<FormHandles>((props, ref) => {
    console.log('child ponent', ref.current);
    
    return (
      <div>any thing</div>
    )
  })

I'm having a problem when using forwardRef with TypeScript.

What I want? pass a typed ref to the child ponent.

What am I getting value of console.log - child ponent null

Code for parent ponent

  // ponent parent
  import { FormHandles } from '@unform/core';

  export const App = () => {
    const formRef = createRef<FormHandles>();

    return (
      <Child ref={formRef} />
    )
  }

Code for child ponent

  // ponent child
  import { FormHandles } from '@unform/core';

  export const Child = forwardRef<FormHandles>((props, ref) => {
    console.log('child ponent', ref.current);
    
    return (
      <div>any thing</div>
    )
  })

• javascript
• reactjs
• typescript
• ref
• react-forwardref

Share Improve this question Follow asked May 28, 2021 at 13:23 AndresdoSantosAndresdoSantos 5911 gold badge11 silver badge55 bronze badges 1

• Use useRef hook in App to create (and use i.e. access that was already created) the ref. Why is it null? It depends on your code. It might also be undefined because you gave it no initial value in createRef<FormHandles>(); so, from where should it get the value? – Ajeet Shah Commented May 28, 2021 at 13:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

import React, {createRef, forwardRef} from 'react';

type Props = { children: React.ReactNode; type: "submit" | "button" };
type Ref = HTMLButtonElement;

const Child = React.forwardRef<Ref, Props>((props, ref) => {
  console.log(ref);
  return (<button ref={ref} className="MyChild" type={props.type}>{props.children}</button>);
});

function App() {
  const ref = React.createRef<HTMLButtonElement>();
  return (
    <Child type="button" ref={ref}>Click Me</Child>
  )
}

export default App;

This is an example to show you how to use forwardRef with typescript

import React, { ChangeEventHandler } from 'react';
import Button from '../button';
import TextInput from '../text-input';
import SearchIcon from '../../icons/Search';

export interface SearchProps {
    className?: string;
    size?: ComponentSize;
    width?: string;
    value?: string;
    onChange?: ChangeEventHandler<HTMLInputElement>;
    placeholder?: string;
}

const Search: React.ForwardRefRenderFunction<HTMLDivElement, SearchProps> = (props, ref) => {
    const { 
        size = 'default',
        className,
        value,
        onChange,
        placeholder,
        width = '100%',
    } = props;


    return (
        <div
            ref={ref}
            className={className}
            width={width}
        >
            <TextInput
                value={value}
                onChange={onChange}
                placeholder={placeholder}
                clearable
            />
            <Button type='secondary' icon={SearchIcon} />
        </div>
    );
}

export default React.forwardRef<HTMLDivElement, SearchProps>(Search);

本文标签： javascriptHow to use TypeScript and forwardRef in ReactJSStack Overflow