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

在React Redux>=v6.0

connnect（）

中，选项支持一个新参数，

forwardRef:boolean

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

因此，在我的名为“WithFields”的HoC中，我写道：

 [...]
 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;

[…]
从“…/components/Form”导入表单；
常量WithFields=（arg1，arg2）=>（WrappedComponent）=>connect（MapStateTrops，{someMethod}，null，{forwardRef:true}）（类扩展了React.Component{
[...]
渲染(
返回（this.wrappedComponent=ref}/>）
)
}
[...]
让Customer=WithFields（'a'，'b'）（表单）；
导出默认客户；

现在，在一个Ticket组件中，我想用一个方法获取Customer ref，但是如何呢

     import Customer from '....';

      class Ticket extends Component {

           SOME_METHOD_TO_GET_THE_REF_OF_THE_HOC_COMPONENT() {
                  ?????????
             }

           render() {
               [....]

               <Customer/> 
            }
   }

从“…”导入客户；
类票证扩展组件{
一些方法可以获取HOC组件（）的REF{
?????????
}
render（）{
[....]
}
}

将此功能作为道具从您的票证组件传递给HOC

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

在HOC中，像这样使用

道具

 props.getRef(value of ref here)

票证组件

  const Ticket = () => {
 const getRef = (value) => {
//do something with the value
}

return <Customer handleRef={getRef}/>
}

---

要获得更详细的答案，请检查此

确定，同时重新检查React docs（），这是如何对使用React Redux进行状态管理的HoC的包装组件实施

ref

hoc.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;

 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()
            }
   }

[…]
从“…/components/Form”导入表单；
常量WithFields=（arg1，arg2）=>
（WrappedComponent）=>
connect（MapStateTops，{someMethod}，null，{forwardRef:true}）（类扩展了React.Component{
[...]
渲染(
返回（this.formComponent=ref}/>）
)
}
[...]
让Customer=WithFields（'a'，'b'）（表单）；
导出默认客户；

ticket.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;

 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()
            }
   }

从“…”导入客户；
类票证扩展组件{
建造师（道具）{
超级（道具）；
this.customer=React.createRef（）；
}
触发自定义方法（e）{
让form=ref.current.formComponent；//这就是包装组件的方式
//示例：获取状态并将其用作Hoc onSubmit（）方法（更新Redux存储）的参数
让状态=form.state；
委托书形式（州，e）；
};
render（）{
[....]
//点击按钮，我们启动triggerCustomerMethod（）
}
}

Not，从HOC返回的组件是

Customer

Customer

导入到

Ticket

中，我想在

Ticket

中获取

Customer

参考。我刚刚添加了答案，如果您清楚，请告诉我不清楚，

setState

与参考有什么关系？您就是sa在票证组件中将其作为您的状态保存。这只是一个示例，您可以使用其中的值执行任何操作。现在查看答案，我已经详细解释了