---
title: 自增组件
order: 10
docGenIncludes:
  - src/components/YwJsonForm/index.tsx
---



```jsx
import React, { useState,useEffect } from 'react';
import ReactDOM from 'react-dom';
import { YwJsonForm } from '@ywfe/yw-design';
import 'antd/dist/antd.css';
// import { YUpload } from "@ywfe/ywd";





let form = null;

const items = [
  {
    type: 'object',
    decorator: null,
    children: [
      {
        type: 'array',
        component: 'RCArrayItems',
        name: 'expressList',
        defaultValue: [{ expressName: '', expressNo: '' }],
        items: {
          type: 'object',
          props: {
            style: {
              background: '#f3f3f3',
              padding: '10px',
            },
          },
          children: [
            {
              component: 'Space',
              type: 'void',
              decorator: null,
              componentProps: {
                wrap: false,
              },
              children: [
                {
                  type: 'void',
                  component: 'YwTitle',
                  componentProps: {
                    text: '物流信息',
                    size: 'small',
                    style:{width:800}
                  },
                  reactions: [
                    {
                      fulfill: {
                        schema: {
                          'x-component-props.text': '{{`物流信息${$index+1}` }}', //任意层次属性都支持表达式
                        },
                      },
                    },
                  ],
                },
                {
                  type: 'void',
                  component: 'RCArrayItems.Remove',
                },
              ],
            },
            {
              name: 'expressName',
              enum: [],
              title: '物流公司',
              component: 'Select',
              props: {
                wrapperWidth: 260,
              },

              required: true,
            },
            {
              title: '物流编号',
              name: 'expressNo',
              component: 'Input',
              type: 'string',
              props: {
                wrapperWidth: 260,
              },
              required: true,
              componentProps: {
                placeholder: '请输入',
              },
            },
          ],
        },
        children: [
          {
            type: 'void',
            component: 'RCArrayItems.Addition',
            componentProps: {
              title: '添加物流',
            },
          },
        ],
      },
    ],
  },
];


const onSubmit = (form) => {
  console.log('submit', form);
};

const onCreate = (_form) => {
  console.log('create', _form);
  // form实例  Formily2.0  文档传送门 https://core.formilyjs.org/zh-CN/api/models/form
  form = _form 
  // 设置初始值
  form.setInitialValues({ input: 123 })
};


const App = () => {

 
    return (
      <div>
        <YwJsonForm items={items} scrollIntoView buttons={[]} onCreate={onCreate} onSubmit={onSubmit} />
      </div>
    );
}

ReactDOM.render(<App />, mountNode);
```