@aliretail/react-dynamic-delivery/demo/Page/analysis-simple.md

动态下发引擎

---
title: 解析模式 - simple
order: 2
---

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

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

const { SchemaForm, createFormActions, LifeCycleTypes } = FormComponents;

const ROOT_DOM_CLASS_NAME = 'aliretail--demo';

const userCustomConfig = {
  data: {
    page: {
      type: 'PageLayout',
      fields: {
        others: {
          mode: 'fixed',
        },
      },
    },
    nav: {
      type: 'Nav',
    },
    EDIT_FOOTER: {
      type: 'UnionFooter',
    },
    submitBtn: {
      type: 'Button',
      fields: {
        others: {
          type: 'primary',
          children: '提交并生效',
          linkageName: 'submitList',
        },
      },
    },
  },
  linkage: {
    submit: {
      type: 'submit',
      fields: {
        url: 'https://oneapi.alibaba-inc.com/mock/aliretail_materials/dynamic-delivery/MPagePush',
      },
    },
    showSuccessToast: {
      type: 'toast',
      fields: {
        type: 'success',
        content: '提交成功',
      },
    },
    submitList: ['submit', 'showSuccessToast'],
  },
  hierarchy: {
    root: 'page',
    structure: {
      page: ['nav', 'EDIT_FOOTER'],
      EDIT_FOOTER: ['submitBtn'],
    },
  },
};

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

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

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

  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);
```