react组件问题,未知组件

项目使用的是react 初步看了一下使用的是antd组件

img


但是图示好像跟官网不太一样,这是使用了什么?

我要做模态窗的表单校验.组件不一致 方法没法用了 不懂react呀

应该是自定义组件名吧
react上还是比较常见的
按照截图中的代码，可以试试全局搜索a-button或者abutton应该可以找得到（不要区分大小写，也可能是aButton AButton这种）

img

  • 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7488757
  • 你也可以参考下这篇文章：react antd 弹框 只显示遮罩层，不显示弹框内容
  • 除此之外, 这篇博客: react antd 动态增减表单项组件，直接使用，可选初始值，支持多个表单项，附源码。中的 使用方法(组件可以直接放在项目里直接使用，不一定要引依赖) 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • v 1.1.1版本

    //示例
import React, {PureComponent} from 'react';
import {Form, Input, Select} from 'antd';
import {DynamicFormItem, MyInput} from "react-antd-dynamicformitem"

const Option = Select.Option;

@Form.create({})
class FormTest extends PureComponent {
renderView= (params)=>{//表单项
    return <MyInput
      initialValue={params.key}
      actions={[<Select onChange={(value) => { //返回需要渲染的每个标签
        params.renderViewOnchange({"sex": value}, params.key)
      }} value={params.key.item1}>
        <Option value={"option1"}>选项1</Option>
        <Option value={"option2"}>选项2</Option>
        <Option value={"option3"}>选项3</Option>
        <Option value={"option4"}>选项4</Option>
      </Select>, <Input value={params.key.item2} onChange={(value) => {
        params.renderViewOnchange({"name": value.target.value}, params.key)
      }}/>, <Input value={params.key.item3} onChange={(value) => {
        params.renderViewOnchange({"age": value.target.value}, params.key)
      }}/>, <Input value={params.key.item4} onChange={(value) => {
        params.renderViewOnchange({"phone": value.target.value}, params.key)
      }}/>]}
    />
  };
  render() {
    let {form} = this.props;
    const okHandle = () => {
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        form.resetFields();
        console.log("fieldsValue",fieldsValue);//
      });
    };
    const matchesKey = {"sex": "", "name": "", "age": "", "phone": ""};
    const matchesRules = [];
    return (<DynamicFormItem {...this.props.form} //传入form内容
                         lable={"lable"}//表单项的lable，只在第一行出现
                         newKey={matchesKey}//newKey为每一个表单项的初始值
                         keysName={"keyname"}//表单中值的名称（key）,同getFieldDecorator中内容
                         extra={"同表单项的extra"}//同表单项的extra
                         renderViewData={matchesRules}//内容回填的内容（比如说更新数据时的初始值）
                         renderView={this.renderView}
        />);
  }
}

export default FormTest;

    v1.2.x版本（兼容之前版本，主要优化了renderView写法，支持替换增加表单项按钮样式与内容）

    import React, {PureComponent} from 'react';
import {Form, Input, Select,Button} from 'antd';
import {MyInput,DynamicFormItem} from "react-antd-dynamicformitem"
// import MyInput from "../components/MyInput"
// import DynamicFormItem from "../components/DynamicFormItem"

const Option = Select.Option;

@Form.create({})
class FormTest extends PureComponent {
  renderView = (params) =>
    <MyInput>
      <Select onChange={(value) => {
        params.renderViewOnchange({"item1": value}, params.key)
      }} value={params.key.item1}>
        <Option value={"option1"}>选项1</Option>
        <Option value={"option2"}>选项2</Option>
        <Option value={"option3"}>选项3</Option>
        <Option value={"option4"}>选项4</Option>
      </Select>
      <Input value={params.key.item2} placeholder="姓名" onChange={(value) => {
        params.renderViewOnchange({"item2": value.target.value}, params.key)
      }}/>
      <Input placeholder="性别" value={params.key.item3} onChange={(value) => {
        params.renderViewOnchange({"item3": value.target.value}, params.key)
      }}/>
      <Input placeholder="年龄" value={params.key.item4} onChange={(value) => {
        params.renderViewOnchange({"item4": value.target.value}, params.key)
      }}/>
    </MyInput>

  render() {
    let {form} = this.props;
    const matchesKey = {"item1": "option1", "item2": "", "item3": "", "item4": ""};
    const matchesRules = [];
    return (
      <DynamicFormItem {...form}
                       lable={"这里是lable"}
                       newKey={matchesKey}
                       keysName={"matches"}
                       extra={"这里是提示信息"}
                       renderViewData={matchesRules}
                       addViewStyle={{color:"blue"}}
                       addView={<view><Icon type="plus"/>Add field</view>}
					   renderView={this.renderView}
      />
    );
  }
}

export default FormTest;

    具体的值会自动填入form内容。

解决了 定位到问题了 是antd的vue3版本 逻辑写的有点像react 我以为是react框架 并且我没用过antd组件 抱歉..