3

我正在使用 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" />;
});

来自控制台的消息：

警告：失败的道具类型：提供给字段的道具组件无效。

4

1 回答 1

1

我使用较旧的语法让它工作，您将 ref 作为普通道具传递。我认为您必须将其称为ref：

在父项中：

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" />;
};

在 Child 中（不确定这是否需要成为一个类）：

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

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

于 2019-09-26T12:12:30.340 回答