最近我们的产品 DMS(数据管理服务) 中，新增了一个新功能——在任务编排时可以增加条件分支。顾名思义，在条件分支中需要有一个条件表达式用于判断是否继续执行下面的分支。在这里，可选的条件项是指定有限的，如果只是一个简单的输入框，用户在使用的时候容易出错，而且也不易做错误提示。所以，我们设计了下面这个组件，以满足所有可能的条件表达式。如图：
手把手教你写一个条件组合组件 - 图1

图中的“条件组”表示是括号，假设我们要写一个 Key1 > 0 && (Key2 < 20 || Key3 > 10) 这样的表达式，那么就可以用下图表示：
手把手教你写一个条件组合组件 - 图2
接下来就跟随笔者一起来实现这样一个有意思的组件吧。

前期准备

技术栈说明

组件使用 React，UI 库使用的阿里集团 fusion 的 Next。读者可以根据自己的习惯使用任意 UI 库替换，或者不使用 UI 都可以。另外本文使用 immer 进行 immutable 处理。

所以 package.json 中的依赖项如下：

  1. {
  2.     "dependencies": {
  3.     "@alifd/next": "^1.23.10",
  4.     "immer": "^9.0.3",
  5.     "react": "^16.4.1",
  6.     "react-dom": "^16.4.1"
  7.   }
  8. }

定义数据结构

React 是基于数据做渲染的，每一次界面的变化都是由数据变化引起的。所以为组件，定义一个合适的数据结构至关重要。根据 DEMO 图片，我们不难想到以下数据结构：

  1. // 为方便理解这里使用 TypeScript 定义，但组件源码中并未使用 TypeScript
  2. enum Logics = {
  3.   and = 'and',
  4.   or = 'or',
  5. };
  6. interface Item { [key: string]: any }
  8. // 完整的数据结构
  9. interface Relation {
  10.     ops: Logics;
  11.   children: Array<Item & Relation>;
  12. }
  15. // 示例：
  16. const value: Relation = {
  17.     ops: 'and', // 可选值：and, or
  18.   children: [
  19.     {
  20.       key: 'Key1',
  21.       op: '>',
  22.       value: 0,
  23.     },
  24.     {
  25.       ops: 'or',
  26.       children: [
  27.         {
  28.           key: 'Key2',
  29.           op: '<',
  30.           value: 20,
  31.         },
  32.         {
  33.           key: 'Key3',
  34.           op: '>',
  35.           value: 10,
  36.         },
  37.       ],
  38.     },
  39.   ],
  40. }

细心的读者发现对 Item 的数据定义是开放的，并没有固定结构内的具体 Key。那是因为这里的具体数据结构会根据业务的需求有所变化。在本文中仅用于示意，这里只有几个简单项的条件、关系符的选择，值也仅仅只是一个输入框。而在实际业务中，情况要复杂的多。条件项通常会是从服务端获取到的特定的内容，这些内容还可能存在关联或者互斥关系；关系符和值可能会跟随选择的条件不同而不同，最常见的，选择条件项可能有特定的数据类型。比如有数字、字符串、枚举值等，在遇到数字时关系符会是大于、小于、等于等；在遇到字符串时，关系符可能会是等于、包含、属于等，；遇到枚举时，值就可能是一个选择框，而选择值也会特定接口获取的。这些复杂的情况，在组件中很难罗列清楚。

编写过程

定义组件结构

根据上面的数据结构，可以轻松得到这是一个递归嵌套的结构，结构分为 Item 和 Group(Relation) 两种情况。所以相应的组件也可以分出 Item 和 Group 两个子组件。笔者暂且把这个组件命名为 RelationTree ，两个子组件分别命名为 RelationGroup 和 RelationItem。

RelationGroup 对应的是条件组，整个组件其实就是一个条件组；RelationItem 即每个组内的单项。考虑业务的复杂性(上一章节的最后有详细描述)，条件、关系符和值部分的渲染是以函数的形式传入的。整体结构如图：
手把手教你写一个条件组合组件 - 图3
明确以上这些后，我们就可以着手用代码把整个组件的框架写出来了。

RelationTree.jsx

  1. import React, { useState } from 'react';
  2. import RelationGroup, { defaultOpsValue } from './RelationGroup';
  4. import './RelationTree.less';
  6. const defaultRelation = {
  7.   ops: defaultOpsValue,
  8.   children: [{}],
  9. };
  11. function RelationTree({ value, setElementTerm }) {
  12.   const [relations, setRelations] = useState(defaultRelation);
  14.   return (
  15.     <div className="vui-relation-tree">
  16.       {/* 一个完整的 value 其实就是一个 RelationGroup */}
  17.       <RelationGroup
  18.         // 还未开始渲染任何控件，所以 pos 为空
  19.         pos=""
  20.         data={relations}
  21.         setElementTerm={setElementTerm}
  22.       />
  23.     </div>
  24.   );
  25. }
  27. export default RelationTree;

RelationGroup.jsx

  1. import React from 'react';
  2. import { Select, Button } from '@alifd/next';
  3. import RelationItem from './RelationItem';
  5. const { Option } = Select;
  6. export const posSeparator = '_';
  7. export const defaultOpsValue = 'and';
  9. function RelationGroup({ data, pos, setElementTerm }) {
  10.   const { children, ops } = data;
  11.   const relationValue = ops || defaultOpsValue;
  13.   return (
  14.     <div className="vui-relation-group">
  15.       <div className="relational">
  16.         <Select className="relation-sign" value={relationValue}>
  17.           <Option value="and">且</Option>
  18.           <Option value="or">或</Option>
  19.         </Select>
  20.       </div>
  21.       <div className="conditions">
  22.         { children.map((record, i) => {
  23.           const { children: list } = record;
  24.           const newPos = getNewPos(pos, i);
  26.           return list && list.length ? (
  27.             // 包含 children 的项使用 RelationGroup 进行渲染
  28.             <RelationGroup
  29.               pos={newPos}
  30.               key={newPos}
  31.               data={record}
  32.               setElementTerm={setElementTerm}
  33.             />
  34.           ) : (
  35.             // 未包含 children 的使用 RelationItem 进行渲染
  36.             <RelationItem
  37.               pos={newPos}
  38.               key={newPos}
  39.               data={record}
  40.               setElementTerm={setElementTerm}
  41.             />
  42.           );
  43.         }) }
  44.         <div className="operators">
  45.           <Button type="normal" className="add-term">加条件</Button>
  46.           <Button type="normal" className="add-group">加条件组</Button>
  47.         </div>
  48.       </div>
  49.     </div>
  50.   );
  51. }
  53. const getNewPos = (pos, i) => {
  54.   // 如果当前项是整个 value (即组件的起始项)时，新位置即当前序号
  55.   return pos ? `${pos}${posSeparator}${i}` : String(i);
  56. };
  58. export default RelationGroup;

RelationItem.jsx

  1. import React from 'react';
  2. import { Button } from '@alifd/next';
  4. function RelationItem({ data, pos, setElementTerm }) {
  5.   if (typeof setElementTerm !== 'function') {
  6.     console.error('setElementTerm 属性必须设置，且必须是返回 ReactElement 的Function');
  7.     return null;
  8.   }
  10.   return (
  11.     <div className="vui-relation-item">
  12.       { setElementTerm(data, pos) }
  13.       <Button type="normal" className="delete-term">
  14.         删除
  15.       </Button>
  16.     </div>
  17.   );
  18. }
  20. export default RelationItem;

组件调用

有了前面的组件框架，就可以加上组件调用了，方便后面增加 CSS 和逻辑调试。

  1. import ReactDOM from 'react-dom';
  2. import { Select, Input } from '@alifd/next';
  3. import RelationTree from './RelationTree/RelationTree';
  5. import '@alifd/next/index.css';
  6. import './index.less';
  8. const { Option } = Select;
  10. // 包含具体业务逻辑的 Term
  11. const RelationTerm = ({ data }) => {
  12.   const { key, op, value } = data;
  13.   return (
  14.     <div className="term">
  15.       <span className="element">
  16.         <Select placeholder="请选择条件项" value={key}>
  17.           <Option value="Key1">Key1</Option>
  18.           <Option value="Key2">Key2</Option>
  19.           <Option value="Key3">Key3</Option>
  20.         </Select>
  21.       </span>
  22.       <span className="comparison">
  23.         <Select placeholder="请选择关系符" value={op}>
  24.           <Option value="==">等于</Option>
  25.           <Option value="!=">不等于</Option>
  26.           <Option value=">">大于</Option>
  27.           <Option value=">=">大于等于</Option>
  28.           <Option value="<">小于</Option>
  29.           <Option value="<=">小于等于</Option>
  30.         </Select>
  31.       </span>
  32.       <span className="value">
  33.         <Input placeholder="请输入条件值" value={value} />
  34.       </span>
  35.     </div>
  36.   );
  37. }
  39. // 渲染函数
  40. const setElementTerm = (record, pos) => {
  41.   return <RelationTerm data={record} />
  42. };
  44. const data = {
  45.     ops: 'and',
  46.   children: [
  47.     { key: 'Key1', op: '>', value: 0 },
  48.     {
  49.       ops: 'or',
  50.       children: [
  51.         { key: 'Key2', op: '<', value: 20 },
  52.         { key: 'Key3', op: '>', value: 10 },
  53.       ],
  54.     },
  55.   ],
  56. };
  58. ReactDOM.render(
  59.   <RelationTree value={data} setElementTerm={setElementTerm} />,
  60.   document.getElementById('root')
  61. );

CSS样式

执行前面写的组件调用，整个HTML 结构的出来了，据此可以把 CSS 完善起来。这个组件的 CSS 稍微有些复杂，复杂点主要在于几条线，如图：
手把手教你写一个条件组合组件 - 图4
HTML 中的 CSS 使用的都是盒模型，也就是 border 都是包裹在内容外面的。像这种高度和位置不跟元素边缘对齐的线条是无法直接实现的。这里我们需要使用一些非常规属性——伪类。笔者在这里主要使用了 ::before 这个伪类属性，来模拟实现图中所示的视觉效果。具体内容如下：

  1. .vui-relation-tree {
  2.   .vui-relation-group {
  3.     .relational {
  4.       width: 78px;
  5.       padding: 20px 0 0 16px;
  6.       // 表示一个组的竖线，图 ① 标记位置
  7.       border-right: 1px solid #d9d9d9;
  8.     }
  10.       .conditions {
  11.       > div {
  12.         position: relative;
  14.         // 实现每项中间位置显示的短横线，图 ②、③、④ 标记位置的横线
  15.         &::before {
  16.           content: "";
  17.           display: inline-block;
  18.           position: absolute;
  19.           top: 0;
  20.           left: 0px;
  21.           width: 16px;
  22.           height: 14px;
  23.           border-bottom: 1px solid #d9d9d9;
  24.           background-color: #fff;
  25.         }
  27.         // 第一项需要把竖线的前面一截盖住；图 ③ 标记位置上面“空白”区域
  28.         &:first-child {
  29.           &::before {
  30.             left: -1px;
  31.             width: 17px;
  32.           }
  33.         }
  35.         &.vui-relation-group:before {
  36.           top: 20px;
  37.         }
  39.         // 最后一项需要把竖线的后面一截盖住；图 ④ 标记位置下面“空白”区域
  40.         &:last-child {
  41.           &::before {
  42.             top: inherit;
  43.             bottom: 0;
  44.             left: -1px;
  45.             width: 17px;
  46.             border-bottom: 0;
  47.             border-top: 1px solid #d9d9d9;
  48.           }
  49.         }
  50.       }
  51.     }
  52.   }
  53. }

其他的样式都是常规的简单样式，就不一一写出来说明了。

事件交互

最后我们把事件的交互逻辑补充完成，组件中需要完善的事件有：加条件、加条件组、删除(条件)、变更逻辑连接符、变更条件项内容。这些事件无论触发哪个，最终都是改变 state 中的数据，所以我们可以写一个方法来集中实现变更数据的逻辑：

  1. /**
  2.  * @param {object} data RelationTree 完整的 value
  3.  * @param {string} pos 位置字符串，形如：0_0_1
  4.  * @param {string} type 操作类型，如：addTerm, addGroup, changeOps(改变逻辑运算符 &&、||), changeTerm, deleteTerm
  5.  * @param {string} record 变更的单项值
  6.  */
  7. // 如果使用了 immutable，只要将此方法里的内容改成 immutable 的写法即可
  8. const getNewValue = (data = {}, pos = '', type, record) => {
  9.   if (!pos) {
  10.     return record;
  11.   }
  13.   const arrPos = getArrPos(pos);
  14.   const last = arrPos.length - 1;
  15.   // 使用 immer 进行数据处理
  16.   return produce(data, (draft) => {
  17.     let prev = { data: draft, idx: 0 };
  18.     // 暂存遍历到的当前条件组的数据
  19.     let current = draft.children || [];
  20.     // 根据 pos 遍历数据，pos 中的每一个数字代表它所在条件组的序号
  21.     arrPos.forEach((strIdx, i) => {
  22.       const idx = Number(strIdx);
  23.       if (i === last) {
  24.         switch (type) {
  25.           case 'addTerm':
  26.           case 'addGroup': // 加条件或条件组
  27.             current.splice(idx + 1, 0, record);
  28.             break;
  29.           case 'deleteTerm': // 删除条件项
  30.             current.splice(idx, 1);
  31.             // 如果删除了组的最后一项，则删除整个组
  32.             if (!current.length) {
  33.               prev.data.splice(prev.idx, 1);
  34.             }
  35.             break;
  36.           default: // 变更逻辑连接符或条件项内容
  37.             current[idx] = record;
  38.         }
  39.       } else {
  40.         prev = { data: current, idx };
  41.         // 将下一个条件组的数据复制到 current
  42.         current = (current[idx] && current[idx].children) || [];
  43.       }
  44.     });
  45.   });
  46. };

这里重点讲解一下“changeTerm”，Term 是通过回调函数进行渲染的，但 Term 值的变化也需要触发整个组件的 onChange。具体实现如下：

  1. Term 的回调渲染函数执行的时候，将 onChange 作为参数传会到回调函数中。代码如下(RelationItem)： ```jsx import React from ‘react’; import { Button } from ‘@alifd/next’;

function RelationItem({ data, pos, setElementTerm, onTermChange }) { // 此 value 入参必须是 { key: value } 格式的 const handleTermChange = (value) => { if (typeof onTermChange === ‘function’) { onTermChange(pos, { …data, …value }); } };

if (typeof setElementTerm !== ‘function’) { console.error(‘setElementTerm 属性必须设置，且必须是返回 ReactElement 的Function’); return null; }

return (

{ setElementTerm(data, pos, handleTermChange) }
); }

export default RelationItem;

  2. 2. 上面 RelationItem 中 onTermChange 实际在 RelationTree 中处理。代码如下(RelationTree)：
  3. ```jsx
  4. import React, { useState } from 'react';
  5. import RelationGroup, { defaultOpsValue } from './RelationGroup';
  7. import './RelationTree.less';
  9. const defaultRelation = {
  10.   ops: defaultOpsValue,
  11.   children: [{}],
  12. };
  14. function RelationTree({ value, setElementTerm }) {
  15.   const [relations, setRelations] = useState(defaultRelation);
  17.   const setOnChange = (pos, record, type) => {
  18.     // getNewValue 就是本章节一开始讲解的方法；在此不赘述
  19.     const value = getNewValue(relations, pos, type, record);
  20.     if (typeof onChange === 'function') {
  21.       onChange(value, type, record);
  22.     }
  23.     setRelations(value);
  24.   };
  26.   const handleTermChange = (pos, record) => {
  27.     setOnChange(pos, record, 'changeTerm');
  28.   };
  30.   return (
  31.     <div className="vui-relation-tree">
  32.       <RelationGroup
  33.         pos=""
  34.         data={relations}
  35.         setElementTerm={setElementTerm}
  36.                 onTermChange={handleTermChange}
  37.       />
  38.     </div>
  39.   );
  40. }
  42. export default RelationTree;
  1. 调用组件时在回调函数里执行传入的 onChange 事件回调，并按要求传入入参({ key: value } 格式)。代码如下(RelationTerm)： ```jsx import React from ‘react’; import { Select, Input } from ‘@alifd/next’;

const { Option } = Select;

const RelationTerm = ({ data, onChange }) => { const setOnChange = (params) => { if (typeof onChange === ‘function’) { // 执行传入的 onChange 回调，入参都是 { key: value } 格式 onChange(params); } };

const handleKeyChange = (val) => { setOnChange({ key: val }); };

const handleOpsChange = (val) => { setOnChange({ op: val }); };

const handleValueChange = (val) => { setOnChange({ value: val }); };

const { key, op, value } = data; return (

); }

export default RelationTerm;

  2. 其他的事件很简单，都只要在在相应的节点上加上 onClick 或 onChange 属性，然后调用以上方法即可，详细代码请见“完整示例”。
  4. <a name="KB3zE"></a>
  5. ## 完整示例
  6. 仅 RelationTree.jsx、RelationGroup.jsx、RelationItem.jsx 三个文件是属于组件内部逻辑，RelationTerm.jsx 是业务逻辑，在调用组件时以入参的形式使用。
  8. <a name="JibM1"></a>
  9. ### RelationTree.jsx
  10. ```jsx
  11. import produce from 'immer';
  12. import React, { useEffect, useState } from 'react';
  13. import RelationGroup, { getArrPos, defaultOpsValue } from './RelationGroup';
  15. import './RelationTree.less';
  17. const defaultRelation = {
  18.   ops: defaultOpsValue,
  19.   children: [{}],
  20. };
  22. function RelationTree({ value, onChange, setElementTerm }) {
  23.   const [relations, setRelations] = useState(defaultRelation);
  24.   // console.log('relations', relations);
  25.   if (value) {
  26.     useEffect(() => {
  27.       setRelations(value);
  28.     }, [value]);
  29.   }
  31.   /**
  32.    * @param {string} pos 位置字符串，形如：0_0_1
  33.    * @param {object} record 变更的单项值
  34.    * @param {string} type 操作类型，如：addTerm, addGroup, changeOps(改变逻辑运算符 &&、||), changeTerm, deleteTerm
  35.    */
  36.   const setOnChange = (pos, record, type) => {
  37.     const value = getNewValue(relations, pos, type, record);
  38.     if (typeof onChange === 'function') {
  39.       onChange(value, type, record);
  40.     }
  41.     setRelations(value);
  42.   };
  44.   const handleAddGroup = (pos, record) => {
  45.     setOnChange(pos, record, 'addGroup');
  46.   };
  47.   const handleAddTerm = (pos, record) => {
  48.     setOnChange(pos, record, 'addTerm');
  49.   };
  50.   const handleOpsChange = (pos, record) => {
  51.     setOnChange(pos, record, 'changeOps');
  52.   };
  53.   const handleDeleteTerm = (pos, record) => {
  54.     setOnChange(pos, record, 'deleteTerm');
  55.   };
  56.   const handleTermChange = (pos, record) => {
  57.     setOnChange(pos, record, 'changeTerm');
  58.   };
  60.   return (
  61.     <div className="vui-relation-tree">
  62.       <RelationGroup
  63.         pos=""
  64.         data={relations}
  65.         setElementTerm={setElementTerm}
  66.         onAddGroup={handleAddGroup}
  67.         onAddTerm={handleAddTerm}
  68.         onOpsChange={handleOpsChange}
  69.         onDeleteTerm={handleDeleteTerm}
  70.         onTermChange={handleTermChange}
  71.       />
  72.     </div>
  73.   );
  74. }
  77. /**
  78.  * @param {object} data RelationTree 完整的 value
  79.  * @param {string} pos 位置字符串，形如：0_0_1
  80.  * @param {string} type 操作类型，如：addTerm, addGroup, changeOps(改变逻辑运算符 &&、||), changeTerm, deleteTerm
  81.  * @param {string} record 变更的单项值
  82.  */
  83. const getNewValue = (data = {}, pos = '', type, record) => {
  84.   if (!pos) {
  85.     return record;
  86.   }
  88.   const arrPos = getArrPos(pos);
  89.   const last = arrPos.length - 1;
  90.   // 使用 immer 进行数据处理
  91.   return produce(data, (draft) => {
  92.     let prev = { data: draft, idx: 0 };
  93.     // 暂存遍历到的当前条件组的数据
  94.     let current = draft.children || [];
  95.     // 根据 pos 遍历数据，pos 中的每一个数字代表它所在条件组的序号
  96.     arrPos.forEach((strIdx, i) => {
  97.       const idx = Number(strIdx);
  98.       if (i === last) {
  99.         switch (type) {
  100.           case 'addTerm':
  101.           case 'addGroup': // 加条件或条件组
  102.             current.splice(idx + 1, 0, record);
  103.             break;
  104.           case 'deleteTerm': // 删除条件项
  105.             current.splice(idx, 1);
  106.             // 如果删除了组的最后一项，则删除整个组
  107.             if (!current.length) {
  108.               prev.data.splice(prev.idx, 1);
  109.             }
  110.             break;
  111.           default: // 变更逻辑连接符或条件项内容
  112.             current[idx] = record;
  113.         }
  114.       } else {
  115.         prev = { data: current, idx };
  116.         // 将下一个条件组的数据复制到 current
  117.         current = (current[idx] && current[idx].children) || [];
  118.       }
  119.     });
  120.   });
  121. }
  123. export default RelationTree;

RelationGroup.jsx

  1. import React from 'react';
  2. import { Select, Button } from '@alifd/next';
  3. import RelationItem from './RelationItem';
  5. const { Option } = Select;
  6. export const posSeparator = '_';
  7. export const defaultOpsValue = 'and';
  9. function RelationGroup({ data, pos, setElementTerm, onAddGroup, onAddTerm, onOpsChange , onDeleteTerm, onTermChange }) {
  10.   const getLastPos = () => {
  11.     const arrPos = getArrPos(pos);
  12.     const { children } = data;
  13.     arrPos.push(children.length - 1)
  14.     return arrPos.join(posSeparator);
  15.   };
  16.   const handleOpsChange = (value) => {
  17.     if (typeof onOpsChange === 'function') {
  18.       onOpsChange(pos, { ...data, ops: value });
  19.     }
  20.   };
  21.   const handleAddTermClick = () => {
  22.     const record = {};
  23.     const pos = getLastPos();
  24.     if (typeof onAddTerm === 'function') {
  25.       onAddTerm(pos, record);
  26.     }
  27.   };
  28.   const handleAddGroupClick = () => {
  29.     const record = { ops: defaultOpsValue, children: [{}] };
  30.     const pos = getLastPos();
  31.     if (typeof onAddGroup === 'function') {
  32.       onAddGroup(pos, record);
  33.     }
  34.   };
  37.   const { children, ops } = data;
  38.   const relationValue = ops || defaultOpsValue;
  40.   return (
  41.     <div className="vui-relation-group">
  42.       <div className="relational">
  43.         <Select className="relation-sign" value={relationValue} onChange={handleOpsChange}>
  44.           <Option value="and">且</Option>
  45.           <Option value="or">或</Option>
  46.         </Select>
  47.       </div>
  48.       <div className="conditions">
  49.         { children.map((record, i) => {
  50.           const { children: list } = record;
  51.           const newPos = getNewPos(pos, i);
  53.           return list && list.length ? (
  54.             <RelationGroup
  55.               pos={newPos}
  56.               key={newPos}
  57.               data={record}
  58.               setElementTerm={setElementTerm}
  59.               onAddGroup={onAddGroup}
  60.               onAddTerm={onAddTerm}
  61.               onOpsChange={onOpsChange}
  62.               onDeleteTerm={onDeleteTerm}
  63.               onTermChange={onTermChange}
  64.             />
  65.           ) : (
  66.             <RelationItem
  67.               pos={newPos}
  68.               key={newPos}
  69.               data={record}
  70.               setElementTerm={setElementTerm}
  71.               onDeleteTerm={onDeleteTerm}
  72.               onTermChange={onTermChange}
  73.             />
  74.           );
  75.         }) }
  76.         <div className="operators">
  77.           <Button type="normal" className="add-term" onClick={handleAddTermClick}>加条件</Button>
  78.           <Button type="normal" className="add-group" onClick={handleAddGroupClick}>加条件组</Button>
  79.         </div>
  80.       </div>
  81.     </div>
  82.   );
  83. }
  85. const getNewPos = (pos, i) => {
  86.   // 如果当前项是整个 value (即组件的起始项)时，新位置即当前序号
  87.   return pos ? `${pos}${posSeparator}${i}` : String(i);
  88. };
  90. export const getArrPos = (pos) => {
  91.   return (pos && pos.split(posSeparator)) || [];
  92. };
  94. export default RelationGroup;

RelationItem.jsx

  1. import React from 'react';
  2. import { Button } from '@alifd/next';
  4. function RelationItem({ data, pos, setElementTerm, onDeleteTerm, onTermChange }) {
  5.   const handleDeleteTermClick = () => {
  6.     if (typeof onDeleteTerm === 'function') {
  7.       onDeleteTerm(pos, data);
  8.     }
  9.   }
  11.   // 此 value 入参必须是 { key: value } 格式的
  12.   const handleTermChange = (value) => {
  13.     if (typeof onTermChange === 'function') {
  14.       onTermChange(pos, { ...data, ...value });
  15.     }
  16.   };
  18.   if (typeof setElementTerm !== 'function') {
  19.     console.error('setElementTerm 属性必须设置，且必须是返回 ReactElement 的Function');
  20.     return null;
  21.   }
  23.   return (
  24.     <div className="vui-relation-item">
  25.       { setElementTerm(data, pos, handleTermChange) }
  26.       <Button type="normal" onClick={handleDeleteTermClick} className="delete-term">
  27.         删除
  28.       </Button>
  29.     </div>
  30.   );
  31. }
  33. export default RelationItem;

RelationTerm.jsx

  1. import React from 'react';
  2. import { Select, Input } from '@alifd/next';
  4. const { Option } = Select;
  6. const RelationTerm = ({ data, onChange }) => {
  7.   const setOnChange = (params) => {
  8.     if (typeof onChange === 'function') {
  9.       // 执行传入的 onChange 回调，入参都是 { key: value } 格式
  10.       onChange(params);
  11.     }
  12.   };
  14.   const handleKeyChange = (val) => {
  15.     setOnChange({ key: val });
  16.   };
  18.   const handleOpsChange = (val) => {
  19.     setOnChange({ op: val });
  20.   };
  22.   const handleValueChange = (val) => {
  23.     setOnChange({ value: val });
  24.   };
  26.   const { key, op, value } = data;
  27.   return (
  28.     <div className="term">
  29.       <span className="element">
  30.         <Select placeholder="请选择条件项" value={key} onChange={handleKeyChange}>
  31.           <Option value="Key1">Key1</Option>
  32.           <Option value="Key2">Key2</Option>
  33.           <Option value="Key3">Key3</Option>
  34.         </Select>
  35.       </span>
  36.       <span className="comparison">
  37.         <Select placeholder="请选择关系符" value={op} onChange={handleOpsChange}>
  38.           <Option value="==">等于</Option>
  39.           <Option value="!=">不等于</Option>
  40.           <Option value=">">大于</Option>
  41.           <Option value=">=">大于等于</Option>
  42.           <Option value="<">小于</Option>
  43.           <Option value="<=">小于等于</Option>
  44.         </Select>
  45.       </span>
  46.       <span className="value">
  47.         <Input placeholder="请输入条件值" value={value} onChange={handleValueChange} />
  48.       </span>
  49.     </div>
  50.   );
  51. }
  53. export default RelationTerm;

index.jsx

  1. import ReactDOM from 'react-dom';
  2. import RelationTree from './RelationTree/RelationTree';
  3. import RelationTerm from './RelationTerm';
  5. import '@alifd/next/index.css';
  6. import './index.less';
  8. const setElementTerm = (record, pos, onChange) => {
  9.   return <RelationTerm data={record} onChange={onChange} />
  10. };
  12. ReactDOM.render(
  13.   <RelationTree setElementTerm={setElementTerm} />,
  14.   document.getElementById('root')
  15. );

总结

最后我们来简单总结下这个组件在设计上的几个关键点，笔者罗列如下：

  1. pos 采用每个节点所在数组的序号组成的字符串，形如“0_0_1”；通过此值，很方便就能定位到当前修改项在树形结构数据中的位置，极大简化了组件事件交互的代码逻辑。
  2. 巧妙的采用 ::before、:first-child、:last-child 几个伪类实现非常规盒模型视觉效果 —— 类方括号样式。
  3. 使用将 Term 以参数的形式传入的方式，完全剥离业务逻辑，最大限度的增强了可复用性。

以上是关于此组件的所有内容，读者若有其他想法或建议，欢迎留言交流，