– React-connect using forwardRef problem.

In the recent use of onRef in DVAJs, the forwardRef needs to be passed through to the connected component

Something like this:

import React, { forwardRef, useImperativeHandle, useState, useEffect } from 'react';
import { connect } from 'dva'

const C2 = forwardRef((props, ref) = > {

 const h2 = (a)= > {  alert('c2 methods')  setText('onRef has changed ')  }   const [text, setText] = useState('C2')   useImperativeHandle(ref, () => ({  h2: h2,  }))   return <div >  {text}  </div>  })  export default connect((state) = > {  return {  list: state.list,  } })(C2)  Copy the code

Add your own method h2 to the onRef binding passed in

  • We can’t write 🙅 because ref is “isolated” by Hoc higher-order component {connect}

  • Error Unhandled Rejection (Invariant Violation): You must pass a component to the function returned by connect. Instead received {}

By looking at the Redux-Connect documentation connect has four parameters

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
Copy the code

The final argument is passed in: forwardRef

export default connect((state) = > {
  return {
    list: state.list,
  }
}, null.null, { forwardRef: true })(C2)
 // Older version 4 below  export default connect((state) = > {  return {  list: state.list,  } }, null.null, { withRef: true })(C2)  Copy the code

  • Here some pit, Umi3 above is for my use, if you are using a Umi2, above configuration will be null and void, although the react in node_modules | react – version of the story

  • Umi will write:

import React, { forwardRef, useImperativeHandle, useState, useEffect } from 'react';
import { connect } from 'dva'

const C2 = (props) => {
  const { refInstance } = props
   const h2 = () => {  alert('c2 methods')  setText('onRef has changed ')  }   const [text, setText] = useState('C2')   useImperativeHandle(refInstance, () => ({  h2: h2,  }))   return <div >  {text}  </div>  }   const Tc = connect((state) => {  return {  list: state.list,  } })(C2)  // Use Hoc transitory ref for refInstanceexportdefault forwardRef((props, ref) => <Tc {... props} refInstance={ref} />); Copy the code

The connect parameters

  • [mapStateToProps(state, [ownProps]): stateProps] (Function)

This method allows us to bind the data in the store to the component as props. Whenever the store bianh occurs, the mapStateToProps method is called. The result returned by mapStateToProps must be a pure object, which is merged with the component’s props

  • [mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function)

Allows us to bind action as props to the component. If we pass an object, then each function defined on that object will be treated as Redux Action Creator, with the method name defined by the object as the property name. Each method returns a new function in which the Dispatch method takes the return value of Action Creator as an argument. These properties are incorporated into the props of the component. MapDispatchToProps is used to map components to store.dispatch. It can be an object or it can be passed in as a function. It could pass in the Dispatch,ownProps, and define how the UI component issues the action, and essentially call the Dispatch method, okay

  • [mergeProps(stateProps, dispatchProps, ownProps): props] (Function)

If this parameter is specified, the results of the execution of mapStateToProps() and mapDispatchToProps() and the props of the component itself are passed into the callback function. The object returned by this callback function will be passed to the wrapped component as props. You might use this callback function to filter part state data based on the props of the component, or to bind a specific variable in the props to the Action Creator. If you omit this parameter, by default object. assign({}, ownProps, stateProps, dispatchProps) is returned.

  • [options] (Object)

If you specify this parameter, you can customize the behavior of the Connector.

When we open that throw is the default return of mergeProps, which is why we got this error

A link to the

react

react-redux