如何使用 React-Redux 访问 ref >= v6.0？

Question

in React-Redux>= v6.0connnect()选项支持新参数forwardRef: boolean.

如果 {forwardRef ： true} 已传递给连接，则向连接的包装器组件添加 ref 实际上将返回包装组件的实例。

因此，在我的HoC中称为"WithFields"，我写道：

[...]
import Form from '.../components/form';
const WithFields = (arg1, arg2) => (WrappedComponent) => connect(mapStateToProps, {someMethod}, null, {forwardRef: true})(class extends React.Component {
[...]
render(
return(<WrappedComponent ref={ref => this.wrappedComponent = ref }/>)
)
}
[...]
let Customer = WithFields('a', 'b')(Form);
export default Customer;

现在，在工单组件中，我会用一种方法获取客户参考，但是如何呢？

import Customer from '....';
class Ticket extends Component {
SOME_METHOD_TO_GET_THE_REF_OF_THE_HOC_COMPONENT() {
?????????
}
render() {
[....]
<Customer/> 
}
}

Answer 1

好的，还重新检查了 React 文档 (https://reactjs.org/docs/refs-and-the-dom.html(，这是如何实现对使用 React-Redux 进行状态管理的 HoC 的包装组件的ref。

霍克.js

[...]
import Form from '.../components/form';
const WithFields = (arg1, arg2) =>
(WrappedComponent) =>
connect(mapStateToProps, {someMethod}, null, {forwardRef: true})(class extends React.Component {
[...]
render(
return(<WrappedComponent ref={ref => this.formComponent = ref }/>)
)
}
[...]
let Customer = WithFields('a', 'b')(Form);
export default Customer;

票.js

import Customer from '....';
class Ticket extends Component {
constructor(props) {
super(props);
this.customer = React.createRef();
}
triggerCustomerMethod (e) {
let form = ref.current.formComponent; // THIS IS HOW YOU GET THE <Form/> component wrapped in <Customer/> 
// example: get the <Form/> state and use it as argument for Hoc onSubmit() method (that updates the Redux store)
let state = form.state;
form.props.onSubmit(state, e);
};

render() {
[....]
<Customer ref={this.customer}/>
<Button onClick={this.triggerCustomerMethod.bind(this)} text="Save"/> // clicking on button we launch triggerCustomerMethod()
}
}

Answer 2

将此函数作为 props 从 Ticket 组件传递到 HOC

getRef = (refvalue) => { setState({value: refValue})}

在 HOC 内部消耗这样的props

props.getRef(value of ref here)

票证组件

const Ticket = () => {
const getRef = (value) => {
//do something with the value
}
return <Customer handleRef={getRef}/>
}

客户组件

const Customer = props => {
OnChange = (refvalue) => {
props.handleRef(refvalue)
}
return {....}
}

有关更详细的答案，请查看此 如何在 ReactJS 中将数据从子组件传递到其父组件？