ant-design pro 表单ref问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ant-design pro 表单ref问题相关的知识,希望对你有一定的参考价值。

参考技术A ref 问题
我在子组件中定义了一个方法,
在父组件中 通过ref却获取不了子组件的方法

原因: 经过 Form.create 之后如果要拿到 ref,可以使用 rc-form 提供的 wrappedComponentRef

无法让 @ant-design/pro-layout 的样式与“create-react-app”一起使用

【中文标题】无法让 @ant-design/pro-layout 的样式与“create-react-app”一起使用【英文标题】:Cannot get the styles of @ant-design/pro-layout to work with `create-react-app` 【发布时间】:2019-12-09 07:44:00 【问题描述】:

我正在尝试在 create-react-app typescript 项目中使用 @ant-design/pro-layout

我无法让@ant-design/pro-layout 的样式起作用。组件加载良好,但 LESS 加载不好。

除了按照教程use with create-react-app之外,还有什么特别要做的吗?

【问题讨论】:

【参考方案1】:

我遇到了同样的问题。 据我了解,我是 React 的新手,create-react-app 不会编译更少,尽管它对 sass 和 scss 这样做。

所以您有 2(+1) 个选项,如 antd documentation 所述。

    安装craco 包以处理here 中的.less 文件 弹出。 (eject 的答案是here)。注入后可以选择less-loader,修改webpack.config.js。在 webpack.config.js 中你必须添加:


  test: /\.less$/,
  use: [
     loader: "style-loader" ,
     loader: "css-loader" ,
    
      loader: "less-loader",
      options: 
        lessOptions: 
          javascriptEnabled: true,
        
      
    
  ]
,

不要忘记javascriptEnabled: true

    我找到了another way without ejecting(我还没有测试过)。

我个人手动弹出并配置了 webpack。

【讨论】:

以上是关于ant-design pro 表单ref问题的主要内容,如果未能解决你的问题,请参考以下文章

ant-design表单校验defaultValue校验不通过问题

用ant-design在react js中提交后清除表单输入字段值

如何知道 Ant-Design 表单中的所有字段何时被验证(添加值)?

ant-design表单自定义验证

基于vue Ant-Design 的表单设计器,快速开发

ant-design 表单form label不换行