如何在基于类的组件中使用React.forwardRef？

Question

我正在尝试使用React.forwardRef,但是如何让它在基于类的组件(而不是HOC)中工作.

docs示例使用元素和功能组件,甚至在高阶组件的函数中包装类.

所以,从他们的ref.js文件中的这样的东西开始:

const TextInput = React.forwardRef(
    (props, ref) => (<input type="text" placeholder="Hello World" ref={ref} />)
);

而是将其定义为:

class TextInput extends React.Component {
  render() {
    let { props, ref } = React.forwardRef((props, ref) => ({ props, ref }));
    return <input type="text" placeholder="Hello World" ref={ref} />;
  }
}

要么

class TextInput extends React.Component {
  render() { 
    return (
      React.forwardRef((props, ref) => (<input type="text" placeholder="Hello World" ref={ref} />))
    );
  }
}

只有工作:/

另外,我知道我知道,参考不是​​反应方式.我正在尝试使用第三方画布库,并希望在单独的组件中添加一些工具,因此我需要事件监听器,因此我需要生命周期方法.以后它可能会走另一条路,但我想尝试一下.

文档说这是可能的!

Ref转发不仅限于DOM组件.您也可以将refs转发给类组件实例.

来自本节的说明.

但后来他们继续使用HOC而不仅仅是课程.

Answer 1

通过使用ref帮助程序代理类导出,可以实现始终使用相同prop的想法.

class ElemComponent extends Component {
  render() {
    return (
      <div ref={this.props.innerRef}>
        Div has ref
      </div>
    )
  }
}

export default React.forwardRef((props, ref) => <ElemComponent 
  innerRef={ref} {...props}
/>);

所以基本上,是的,我们被迫有一个不同的道具来转发参考,但它可以在集线器下完成.重要的是公众将其作为正常参考使用.

Answer 2

基本上，这只是一个HOC函数。如果您想在课堂上使用它，可以自己做，并使用常规道具。

class TextInput extends React.Component {
    render() {
        <input ref={this.props.forwardRef} />
    }
}

const ref = React.createRef();
<TextInput forwardRef={ref} />

例如在中使用此模式，styled-components并在其中调用innerRef它。

Answer 3

class BeautifulInput extends React.Component {
  const { innerRef, ...props } = this.props;
  render() (
    return (
      <div style={{backgroundColor: "blue"}}>
        <input ref={innerRef} {...props} />
      </div>
    )
  )
}

const BeautifulInputForwardingRef = React.forwardRef((props, ref) => (
  <BeautifulInput {...props} innerRef={ref}/>
));

const App = () => (
  <BeautifulInputForwardingRef ref={ref => ref && ref.focus()} />
)

您需要使用其他属性名称来将引用转发到类。innerRef在许多库中常用。

Answer 4

如果您需要在许多不同的组件中重用此功能，您可以将此功能导出为类似的东西withForwardingRef

const withForwardingRef = <Props extends {[_: string]: any}>(BaseComponent: React.ReactType<Props>) =>
    React.forwardRef((props, ref) => <BaseComponent {...props} forwardedRef={ref} />);

export default withForwardingRef;

用法：

const Comp = ({forwardedRef}) => (
 <input ref={forwardedRef} />
)
const EnhanceComponent = withForwardingRef<Props>(Comp);  // Now Comp has a prop called forwardedRef

Answer 5

如果您愿意，可以使用更高阶的组件来实现：

import React, { forwardRef } from 'react'

const withForwardedRef = Comp => {
  const handle = (props, ref) =>
    <Comp {...props} forwardedRef={ref} />

  const name = Comp.displayName || Comp.name
  handle.displayName = `withForwardedRef(${name})`

  return forwardRef(handle)
}

export default withForwardedRef

然后在您的组件文件中：

class Boop extends React.Component {
  render() {
    const { forwardedRef } = this.props

    return (
      <div ref={forwardedRef} />
    )
  }
}

export default withForwardedRef(Boop)

我通过测试进行了前期工作，并为此发布了一个程序包react-with-forwarded-ref：https : //www.npmjs.com/package/react-with-forwarded-ref