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

动态下发引擎

---
title: 解析模式 - merge
order: 1
---

```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 dynData from './protocol/analysis-merge';
import { MGetPageConfig } from './model/request';
import { getAllUrlParameter } from './utils/search';

const { SchemaForm, createFormActions, LifeCycleTypes } = FormComponents;

const ROOT_DOM_CLASS_NAME = 'aliretail--demo';

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

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

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

    // 添加从url上面获取数据直接带到接口中
    const result = await MGetPageConfig(getAllUrlParameter());
    const schema = this.dynamic.dynamicDeal(dynData, result);
    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);
```