包装 Antd 组件

Wrapping Antd Component

我想包装 antd 组件,例如。 Input 到 MyInput 中,这样我就可以添加对新 pros 和 classNames 的支持,但是当我将 then 放入 Form

时它停止工作

MyInput.js

import { Input } from 'antd';

function MyInput({ className='', ...rest }) {
  const computedClassName = 'my-input '+className;

  return (
    <Input className={computedClassName} {...rest} />
  );
}

MyInput.defaultProps = Input.defaultProps;
MyInput.propTypes = Input.propTypes;
MyInput.Group = Input.Group;
MyInput.Search = Input.Search;
MyInput.TextArea = Input.TextArea; 

现在,如果我将 <MyInput /> 放在 <Form/> 中,它就会停止工作

DEMO

我尝试调试,看起来 rc-form/lib/createBaseForm 中的 saveRef 函数正在接收 null 作为组件参数,所以这让我觉得是一个 ref 问题,但我不确定如何修复它:S

没关系,我找到了答案...

根据 Refs 文档

refs 不适用于无状态组件,将其更改为 class 并有效