---
order: 0
title: 基本用法
title_en: Basic usage
---

````jsx
import { DiffTable } from 'parkball';

const { Wrapper } = DiffTable

const statusMap = {
  1: '状态1',
  2: '状态2',
  3: '状态3',
}

const from = {
  name: '张三',
  age: 20,
  status: 1,
  data: {
    weight: '123kg',
    height: null,
    hobby: [
      {
        name: '运动',
        order: 1,
      }
    ]
  }
}

const to = {
  name: '李四',
  age: 20,
  status: 2,
  data: {
    weight: '234kg',
    height: 300,
    hobby: [
      {
        name: '运动',
        order: 1,
      }, {
        name: '打游戏',
        order: 2,
      }
    ]
  }
}

const diffKeys = [
  {
    title: '用户名称',
    dataIndex: 'name',
  }, {
    title: '年龄',
    dataIndex: 'age',
  }, {
    title: '身高',
    dataIndex: 'data.height',
  }, {
    title: '体重',
    dataIndex: 'data.weight',
  }, {
    title: '爱好',
    dataIndex: 'data.hobby',
    defaultValue: [],
    renderFrom: fromVal => fromVal.map((t, i) => <div key={i}>{t.name}</div>),
    renderTo: (fromVal, toVal) => toVal.map((t, i) => <Wrapper key={i} isDifferent={!fromVal.some(f => f.name === t.name)}>{t.name}</Wrapper>)
  }, {
    title: '状态',
    dataIndex: 'status',
    renderFrom: fromVal => statusMap[fromVal],
    renderTo: (fromVal, toVal) => statusMap[toVal],
  },
]

class Demo extends React.Component {
  render() {
    return (
      <DiffTable diffKeys={diffKeys} from={from} to={to} />
    );
  }
}

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