@cqsjjb-formily/renderer

@表单渲染器

Usage

import React from 'react';
import Renderer from '@cqsjjb-formily/renderer';

function App (props) {
  // 获取form实例
  const form = React.useRef();
  
  React.useEffect(() => {
    // 输出form实例
    console.log(form.current);
  }, []);
  
  return (
    <Renderer
      ref={form}
      schema={/* @API_表单配置JSON */}
      rendererEmpty={/* @API_渲染空状态 */}
      rendererFooter={/* @API_渲染Button or 其他组件 */}
      onFinish={/* @API_触发submit提交 */}
    />
  );
}

API

1. schema: object | 表单配置JSON
2. rendererEmpty: () => React.ReactNode | 当表单配置为空时需要显示的内容
3. rendererFooter: () => React.ReactNode | 需要手动定义提交按钮时传入的内容
4. onFinish: (values: object) => void | 触发submit提交
5. ref: { current: undefined | object } | 引用
6. form实例请参考-官网

API.schema

字段属性请参考-官网

API.onFinish

function App () {
  return (
    <Renderer
      onFinish={values => {
        console.log(values);
      }}
    />
  );
}

API.rendererEmpty

function App () {
  return (
    <Renderer
      rendererEmpty={() => <div>暂无配置。</div>}
    />
  );
}

API.rendererFooter

import { Form, Button } from 'antd';

function App () {
  return (
    <Renderer
      rendererFooter={() => (
        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
          >
            提交
          </Button>
        </Form.Item>
      )}
    />
  );
}