From 1de27ea4b60c776d84ddef4b56f98302c410953a Mon Sep 17 00:00:00 2001 From: janrywang Date: Fri, 9 Apr 2021 09:25:29 +0800 Subject: [PATCH] docs(home): update docs --- .umirc.js | 4 + docs/guide/advanced/destructor.md | 233 ++++++++++++++++++++++++++++++ 2 files changed, 237 insertions(+) create mode 100644 docs/guide/advanced/destructor.md diff --git a/.umirc.js b/.umirc.js index 7f146d89416..964ff18e19c 100644 --- a/.umirc.js +++ b/.umirc.js @@ -181,6 +181,10 @@ export default { title: '实现自定义组件', path: '/guide/advanced/custom', }, + { + title: '前后端数据差异兼容方案', + path: '/guide/advanced/destructor', + }, { title: '管理业务逻辑', path: '/guide/advanced/business-logic', diff --git a/docs/guide/advanced/destructor.md b/docs/guide/advanced/destructor.md new file mode 100644 index 00000000000..1dafd73b8dd --- /dev/null +++ b/docs/guide/advanced/destructor.md @@ -0,0 +1,233 @@ +# 前后端数据差异兼容方案 + +很多时候，我们总会遇到前端数据结构与后端数据结构不匹配的场景，看似很简单的问题，其实解决起来非常的让人难受，最常见的问题就是： + +前端日期范围组件输出的是数组结构，但是后端要求的格式是拆分扁平数据结构，这种问题很大程度是受后端领域模型所限制，因为从后端模型设计的角度来看，拆分扁平结构是最佳方案； + +但从前端组件化角度来看，数组结构又是最佳的； + +所以哪一边都有其道理，可惜的是，每次都只能前端取消化这样一个不平等条约，不过，有了 Formily，你就完全不需要为这样一个尴尬局面而难受了，**Formily 提供了解构路径的能力，可以帮助用户快速解决这类问题。**，下面可以看看例子 + +## Markup Schema 案例 + +```tsx +import React from 'react' +import { + Form, + FormItem, + DatePicker, + FormButtonGroup, + Radio, + Submit, +} from '@formily/antd' +import { createForm, onFieldValueChange } from '@formily/core' +import { createSchemaField, FormConsumer } from '@formily/react' +import 'antd/lib/alert/style' + +const SchemaField = createSchemaField({ + components: { + FormItem, + DatePicker, + Radio, + }, +}) + +const form = createForm({ + effects() { + onFieldValueChange('visible_destructor', (field) => { + form.setFieldState('[startDate,endDate]', (state) => { + state.visible = !!field.value + }) + }) + }, +}) + +export default () => { + return ( +
+ + + + + + + 
+          
+            {(form) => JSON.stringify(form.values, null, 2)}
+          
+
+ + + 提交 + +
+ ) +} +``` + +## JSON Schema 案例 + +```tsx +import React from 'react' +import { + Form, + FormItem, + DatePicker, + FormButtonGroup, + Radio, + Submit, +} from '@formily/antd' +import { createForm } from '@formily/core' +import { createSchemaField, FormConsumer } from '@formily/react' +import 'antd/lib/alert/style' + +const SchemaField = createSchemaField({ + components: { + FormItem, + DatePicker, + Radio, + }, +}) + +const form = createForm() + +const schema = { + type: 'object', + properties: { + visible_destructor: { + type: 'boolean', + title: '是否显示解构字段', + default: true, + enum: [ + { label: '是', value: true }, + { label: '否', value: false }, + ], + 'x-decorator': 'FormItem', + 'x-component': 'Radio.Group', + }, + undestructor: { + type: 'string', + title: '解构前', + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker.RangePicker', + }, + '[startDate,endDate]': { + type: 'string', + title: '解构后', + default: ['2020-11-20', '2021-12-30'], + 'x-decorator': 'FormItem', + 'x-component': 'DatePicker.RangePicker', + 'x-reactions': { + dependencies: ['visible_destructor'], + fullfill: { + state: { + visible: '{{!!$deps[0]}}', + }, + }, + }, + }, + }, +} + +export default () => { + return ( +
+ + + 
+          
+            {(form) => JSON.stringify(form.values, null, 2)}
+          
+
+ + + 提交 + + + ) +} +``` + +## 纯 JSX 案例 + +```tsx +import React from 'react' +import { + Form, + FormItem, + DatePicker, + FormButtonGroup, + Radio, + Submit, +} from '@formily/antd' +import { createForm } from '@formily/core' +import { Field, FormConsumer } from '@formily/react' +import 'antd/lib/alert/style' + +const form = createForm() + +export default () => { + return ( +
+ + + { + field.visible = !!field.query('visible_destructor').value() + }} + /> + + 
+          
+            {(form) => JSON.stringify(form.values, null, 2)}
+          
+
+ + + 提交 + + + ) +} +```