如何转发引用函数声明而不是箭头函数？

Question

This is the example in React's website:

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

How can I do the same with function(){} ? I want to do this because I want to avoid create an anonymous function to help with debugging.

Answer 1

You could pass a React functional component to the argument of React.forwardRef

function Button(props, ref) {
  return (
     <button ref={ref} className="FancyButton">
       {props.children}
     </button>
  )
}

const FancyButton = React.forwardRef(Button);

Answer 2

const FancyButton = React.forwardRef(
  function Button(props, ref) {
    return (
      <button ref={ref} className="FancyButton">
        {props.children}
      </button>
    )
  }
);