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

我试图使用React.forwardRef，但却被如何让它在基于类的组件（而不是HOC）中工作所绊倒

文档示例使用元素和功能组件，甚至将类包装在函数中以用于更高阶组件

因此，从他们的

ref.js

文件中的类似内容开始：

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

const TextInput=React.forwardRef(
（道具，参考）=>（）
);

并将其定义为如下内容：

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扩展了React.Component{
render（）{
设{props，ref}=React.forwardRef（（props，ref）=>（{props，ref}））；
返回；
}
}

或

class TextInput扩展了React.Component{
render（）{
返回(
React.forwardRef（（道具，ref）=>（））
);
}
}

仅适用于：/

另外，我知道我知道，裁判不是最好的反应方式。我正在尝试使用第三方画布库，并希望在单独的组件中添加一些工具，因此我需要事件侦听器，因此我需要生命周期方法。以后可能会走不同的路线，但我想试试这个

医生说这是可能的

Ref转发不限于DOM组件。也可以将参照转发到类组件实例

从

---

但是他们继续使用HOC而不仅仅是类。

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

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

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

class TextInput扩展了React.Component{
render（）{
}
}
const ref=React.createRef（）；

例如，此模式在

样式化组件中使用，在那里称为
innerRef
。
类扩展React.Component{
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()} />
)

const{innerRef，…props}=this.props；
render（）(
返回(
)
)
}
const BeautifulInputForwardingRef=React.forwardRef（（道具，ref）=>(
));
常量应用=（）=>(
ref&&ref.focus（）}/>
)

您需要使用不同的道具名称将ref转发给类
innerRef
常用于许多库。
始终为
ref
使用同一道具的想法可以通过使用助手代理类导出来实现

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

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

class ElemComponent扩展组件{
render（）{
返回(
迪夫有个裁判
)
}
}
导出默认的React.forwardRef（（props，ref）=>）；

所以，基本上，我们不得不有一个不同的道具向前参考，但它可以在枢纽下完成。公众将其用作普通参考非常重要。
如果您需要在许多不同的组件中重用此功能，您可以将此功能导出为类似于
的withForwardingRef

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

export default withForwardingRef;

constwithforwardingref=（BaseComponent:React.ReactType）=>
React.forwardRef（（道具，ref）=>）；
使用ForwardingRef导出默认值；

用法：

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

const Comp=（{forwardedRef}）=>(
)
常量增强组件=withForwardingRef（Comp）；//现在Comp有一个名为forwardedRef的道具
如果您愿意，可以使用高阶组件完成此操作：

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

import React，{forwardRef}来自“React”
常量withForwardedRef=Comp=>{
常量句柄=（道具，参考）=>
常量名称=组件显示名称| |组件名称
handle.displayName=`withForwardedRef（${name}）`
返回forwardRef（句柄）
}
导出默认值withForwardedRef

然后在组件文件中：

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

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

export default withForwardedRef(Boop)

类Boop扩展了React.Component{
render（）{
const{forwardedRef}=this.props
返回(
)
}
}
使用ForwardedRef（Boop）导出默认值

我提前做了测试并为此发布了一个包，
react with forwarded ref
：
使用一个不同名称的道具，如
innerRef
，完全没有抓住要点。目标是完全透明：我应该能够将
视为常规DOM元素，但使用样式化组件方法，我需要记住，该组件对refs使用任意命名的prop，而不仅仅是
ref
，样式化组件打算使用
React.forwardRef
将ref传递给子级，而OP正试图实现这一点。在您的代码中
beautifulInputElement
更像是一个函数而不是React元素，它应该是这样的
const beautifulInputElement=ref&&ref.focus（）}/>
如果您将组件包装在一个HOC中，比如React-Redux的
connect
或marterial ui的
with style
，您会怎么做？
connect
或
with style
有什么问题？您应该使用
forwardRef
包装所有HOC，并在内部使用“safe”道具将ref传递给链中最低的组分。关于如何在使用setState时在酶中测试这一点，有什么见解吗？抱歉，我需要更多的细节。不确定到底是什么问题。我得到：不变冲突：对象作为React子对象无效（找到：具有键{$$typeof，render}的对象）。如果要呈现子对象集合，请改用数组。
class Boop extends React.Component {
  render() {
    const { forwardedRef } = this.props

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

export default withForwardedRef(Boop)