@aliretail/react-materials-components/demo/MarketingOperationLog/Dialog.md

B 端物料组件库

---
title: MarketingOperationLog-Simple
order: 1
---

演示信息提示组件用法，按照交互图，宽度默认 400px，外观默认'toast'

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import { Button } from '@alifd/next';
import { MarketingOperationLog } from '@aliretail/react-materials-components';

const dataSource = [
  {
    traceId: '2',
    operateTime: '操作时间',
    operatePerson: '操作账号',
    eventType: '操作时机',
    ip: '机器IP',
    children: [
      {
        id: '1',
        operateType: '操作类型',
        operateObject: '操作对象',
        fieldName: '属性ID',
        beforeValue: '原字段',
        afterValue: '新字段',
      },
    ],
  },
  {
    traceId: '1',
    operateTime: '操作时间1',
    operatePerson: '操作账号1',
    eventType: '操作时机1',
    ip: '机器IP1',
    children: [
      {
        id: '2',
        operateType: '操作类型1',
        operateObject: '操作对象1',
        fieldName: '属性ID1',
        beforeValue: '原字段1',
        afterValue: '新字段1',
      },
    ],
  },
];

class App extends Component {
  render() {
    return (
      <div>
        <MarketingOperationLog
          // appCode="aliretail_materials"
          // apiCode="marketing_operation_log"
          url="https://oneapi.alibaba-inc.com/mock/aliretail_materials/marketing_operation_log"
          detailUrl="https://oneapi.alibaba-inc.com/mock/aliretail_materials/marketing_operation_log/children"
          actTitle="花田里犯了错"
        >
          <Button>详情按钮</Button>
        </MarketingOperationLog>
      </div>
    );
  }
}

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