@aliretail/react-dynamic-delivery/demo/Page/custom-container.md

动态下发引擎

---
title: 自定义布局
order: 10
---

```jsx
import { Component } from 'react';
import moment from 'moment';
import { FormComponents, PageLayout } from '@aliretail/react-materials-components';
import DynamicInit from '@aliretail/react-dynamic-delivery';
import { Button } from '@alifd/next';

import './index.scss';
import './componentsMap';
import { MGetPageConfig } from './model/request';
import { getAllUrlParameter } from './utils/search';

const { SchemaForm, createFormActions, LifeCycleTypes, registerVirtualBox } = FormComponents;
const { Footer } = PageLayout;

const ROOT_DOM_CLASS_NAME = 'aliretail--demo';
// 这里写了一个自定义的footer
const FooterX = (props) => {
  const { form } = props;
  return (
    <Footer>
      <Footer.Container>
        <Footer.BtnArea>
          <Button
            type="primary"
            onClick={() => {
              form.submit().then((val) => {
                console.log('submit data: ', val.values);
              });
            }}
          >
            提交
          </Button>
        </Footer.BtnArea>
      </Footer.Container>
    </Footer>
  );
};
registerVirtualBox('FooterX', FooterX);

const userCustomConfig = {
  data: {
    page: {
      type: 'PageLayout',
      fields: {
        others: {
          mode: 'fixed',
        },
      },
    },
    nav: {
      type: 'Nav',
    },
    EDIT_FOOTER: {
      type: 'FooterX',
    },
  },
  hierarchy: {
    root: 'page',
    structure: {
      page: ['nav', 'EDIT_FOOTER'],
    },
  },
};

const apiPageConfig = {
  data: {
    name: {
      type: 'Input',
      fields: {
        others: {
          maxLength: 16,
        },
        formItemConfig: {
          title: '姓名',
        },
        value: 'ness',
      },
    },
    age: {
      type: 'Hidden',
      fields: {
        value: '18',
      },
    },
  },
  layout: [
    {
      title: '基础信息',
      content: ['name', 'age'],
    },
  ],
};

class Demo extends Component {
  state = {
    actions: createFormActions(),
    schema: null,
  };

  dynamic = new DynamicInit({
    linkageMap: {},
    analyzeMode: 'simple',
    rootDom: `.${ROOT_DOM_CLASS_NAME}`,
    extFooterUIType: ['FooterX'],
  });

  async componentDidMount() {
    moment.locale('zh-cn');

    // 添加从url上面获取数据直接带到接口中
    const schema = this.dynamic.dynamicDeal(userCustomConfig, apiPageConfig);
    this.setState({
      schema,
    });
  }

  render() {
    const { schema, actions } = this.state;

    return (
      <div className={ROOT_DOM_CLASS_NAME}>
        <SchemaForm actions={actions} schema={schema} />
      </div>
    );
  }
}

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