如何在基于类的组件中使用React.forwardRef?
我正在尝试使用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} />))
);
}
}
只工作:/
另外,我知道我知道,裁判不是反应方式。我正在尝试使用第三方画布库,并希望将其一些工具添加到单独的组件中,因此我需要事件侦听器,因此需要生命周期方法。稍后可能会走不同的路线,但是我想尝试一下。
文档说这是可能的!
引用转发不限于DOM组件。您也可以将引用转发到类组件实例。
从本节的注释中。
但是随后他们继续使用HOC,而不仅仅是类。
回答:
始终使用相同道具的想法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}
/>);
因此,基本上,是的,我们被迫拥有其他支持转发引用的道具,但这可以在中心下完成。公众将其用作常规参考非常重要。
以上是 如何在基于类的组件中使用React.forwardRef? 的全部内容, 来源链接: utcz.com/qa/419995.html