Javascript 如何在基于类的组件中使用 React.forwardRef？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51526461/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use React.forwardRef in a class based component?
提问by Han Lazarus
I'm trying to use React.forwardRef, but tripping over how to get it to work in a class based component (not HOC).
我正在尝试使用 React.forwardRef，但对如何让它在基于类的组件（不是 HOC）中工作感到困惑。
The docs examples use elements and functional components, even wrapping classes in functions for higher order components.
文档示例使用元素和功能组件，甚至将类包装在高阶组件的函数中。
So, starting with something like thisin their ref.jsfile:
因此，从像这样在他们的ref.js文件：
const TextInput = React.forwardRef(
(props, ref) => (<input type="text" placeholder="Hello World" ref={ref} />)
);
and instead defining it as something like this:
而是将其定义为这样的：
class TextInput extends React.Component {
render() {
let { props, ref } = React.forwardRef((props, ref) => ({ props, ref }));
return <input type="text" placeholder="Hello World" ref={ref} />;
}
}
or
或者
class TextInput extends React.Component {
render() {
return (
React.forwardRef((props, ref) => (<input type="text" placeholder="Hello World" ref={ref} />))
);
}
}
only working :/
只工作：/
Also, I know I know, ref's aren't the react way. I'm trying to use a third party canvas library, and would like to add some of their tools in separate components, so I need event listeners, so I need lifecycle methods. It may go a different route later, but I want to try this.
另外，我知道我知道，裁判不是反应方式。我正在尝试使用第三方画布库，并且想在单独的组件中添加他们的一些工具，因此我需要事件侦听器，因此我需要生命周期方法。以后可能会走不同的路线，但我想试试这个。
The docs say it's possible!
医生说这是可能的！
Ref forwarding is not limited to DOM components. You can forward refs to class component instances, too.
Ref 转发不仅限于 DOM 组件。您也可以将引用转发到类组件实例。
from the note in this section.
But then they go on to use HOCs instead of just classes.
但随后他们继续使用 HOC 而不仅仅是类。
采纳答案by Mr Br
The idea to always use the same prop for the refcan be achieved by proxying class export with a helper.
ref可以通过使用助手代理类导出来实现始终使用相同道具的想法。
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}
/>);
So basically, yea, we are forced to have a different prop to forward ref, but it can be done under the hub. It's important that the public use it as a normal ref.
所以基本上，是的，我们被迫有一个不同的道具来转发引用，但它可以在集线器下完成。公众将其用作正常参考很重要。
回答by Sebastien Lorber
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()} />
)
You need to use a different prop name to forward the ref to a class. innerRefis commonly used in many libraries.
您需要使用不同的道具名称将 ref 转发到类。innerRef在许多图书馆中常用。
回答by ?ukasz Wojciechowski
Basically, this is just a HOC function. If you wanted to use it with class, you can do this by yourself and use regular props.
基本上，这只是一个 HOC 功能。如果您想在课堂上使用它，您可以自己完成并使用常规道具。
class TextInput extends React.Component {
render() {
<input ref={this.props.forwardRef} />
}
}
const ref = React.createRef();
<TextInput forwardRef={ref} />
This pattern is used for example in styled-componentsand it's called innerRefthere.
例如，此模式用于并在那里styled-components调用innerRef。
回答by rpearce
This can be accomplished with a higher-order component, if you like:
如果您愿意，可以使用高阶组件来完成此操作：
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
And then in your component file:
然后在您的组件文件中：
class Boop extends React.Component {
render() {
const { forwardedRef } = this.props
return (
<div ref={forwardedRef} />
)
}
}
export default withForwardedRef(Boop)
I did the work upfront with tests & published a package for this, react-with-forwarded-ref: https://www.npmjs.com/package/react-with-forwarded-ref
我预先做了测试并为此发布了一个包react-with-forwarded-ref：https: //www.npmjs.com/package/react-with-forwarded-ref
回答by orepor
Incase you need to reuse this in many difference components, you can export this ability to something like withForwardingRef
如果您需要在许多不同的组件中重用它，您可以将此功能导出为 withForwardingRef
const withForwardingRef = <Props extends {[_: string]: any}>(BaseComponent: React.ReactType<Props>) =>
React.forwardRef((props, ref) => <BaseComponent {...props} forwardedRef={ref} />);
export default withForwardingRef;
usage:
用法：
const Comp = ({forwardedRef}) => (
<input ref={forwardedRef} />
)
const EnhanceComponent = withForwardingRef<Props>(Comp); // Now Comp has a prop called forwardedRef
