通过 Redux Form 传递前向引用？

Question

我正在使用 Redux 表单：

父级：

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  componentDidMount() {
    console.log(this.myRef);
  }
  render() {
    return (
        <div>   
            <CustomField ref={this.ref} />
        </div>
    )
  }

在自定义字段中：

import { Field } from 'redux-form';
import Child from 'components/Child';
const CustomField = props => {
  return <Field {...props} component={Child} type="text" />;
};

我需要管理父组件对子组件的关注。通常你会使用前向引用，但我不确定这是否适用于 Redux Forms？以下是错误的，所有的道具都是未定义的：

const CustomField = React.forwardRef((props, ref) => {
  return <Field {...props} component={() => <Child {...props} ref={ref} />} type="text" />;
});

来自控制台的消息：

Warning: Failed prop type: Invalid prop component supplied to Field.

Answer 1

我使用旧语法让它工作，你将 ref 作为普通 prop 传递。我认为您必须将其命名为 ref 以外的其他名称：

在Parent中：

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  componentDidMount() {
    console.log(this.myRef);
  }
  render() {
    return (
        <div>   
            <CustomField customRef={this.ref} />
        </div>
    )
  }

在自定义字段中：

import { Field } from 'redux-form';
import Child from 'components/Child';
const CustomField = props => {
  return <Field {...props} component={Child} type="text" />;
};

In Child（不确定是否需要 class）：

class Child Extends React.Component {
  render(){
    return(
      <input ref={customRef}  />
    )
  }
}

对我来说，较旧的样式似乎更易于使用。作为切线点，如果有人能解释它的缺点会很有趣，因为我认为有一些？

通过 Redux Form 传递前向引用？

Pass forward ref through Redux Form?

forward-reference

redux-form