鲁达 WijmoJS 中自定义 React 菜单和列表项模板
在V2019.0 Update2 的全新版本中，React 框架下 WijmoJS 的前端UI组件功能再度增强。
WijmoJS的菜单和类似列表的控件（ListBox、ComboBox、MultiSelect）允许用户在 formatItem 事件中使用 JS 代码和 DOM API 为每个项目生成元素树，从而自定制项目的内容。在和 React 框架深度结合后，在 JSX 标记中使用 React 组件及其属性绑定将会更加方便，即，以声明方式定义项目内容。
在 WijmoJS 的新版本中，我们为 WijmoJS React Interop 添加了两个特殊的功能项：
- 对于 Menu，我们添加了 MenuItem 和 MenuSeparator 子组件，它允许您在JSX中以声明方式定义菜单项和分隔符。
- 对于所有类似列表的控件（ListBox、ComboBox、MultiSelect、Menu），我们添加了特殊的 wjItemTemplate 渲染道具，它允许您指定绘制项目内容的渲染函数。
React 菜单项（List Items)
纯javascript菜单控件假定其菜单项是在绑定到控件项源属性的数组中定义的，即，项目在React组件的模型部分中定义。但这并不是最佳选项，实际上菜单项与组件的UI关系更为紧密，因此，使用React UI方法（即JSX标记）定义它们会更方便。
使用WijmoJS，您可以通过 @ grapecity 模块中的新MenuItem组件快速实现菜单项目定义：在渲染函数的JSX标记中使用嵌套到其Menu部分的MenuItem组件，而不是在数组中定义项目，其中每个MenuItem定义一个单独的菜单项，其内容具有任意复杂性。
此外，使用MenuSeparator组件还可用于在菜单项之间插入分隔符。例如，此示例中的以下jsx代码定义了具有丰富内容的菜单项目，并在退出项之前使用分隔符：
``` <wjIn header="File" itemClicked={}> <wjInItem> <span className="glyphicon glyphicon-asterisk"></span> <b>New</b> <br /> <small><i>create a new file</i></small> </wjInItem> <wjInItem> <span className="glyphicon glyphicon-folder-open"></span> <b>Open</b> <br /> <small><i>open an existing file or folder</i></small> </wjInItem> <wjInItem> <span className="glyphicon glyphicon-floppy-disk"></span> <b>Save</b> <br /> <small><i>save the current file</i></small> </wjInItem> <wjInSeparator></wjInSeparator> <wjInItem> <span className="glyphicon glyphicon-remove"></span> <b>Exit</b> <br /> <small><i>exit the application</i></small> </wjInItem> </wjIn> ```您还可以从定义其数据的数据源中，动态生成多个MenuItem。
例如下方代码实现了：调色板数组映射到表示其数据的MenuItem数组中：
``` <wjIn header="Palette" maxDropDownHeight={300} value={}> {((value) => { return <wjInItem value={value.name}> {value.name} <span style={{float:'right'}}> {value.colors.map((color) => { return <div style={{ backgroundColor: color, display:'inline', padding:'2px', height:'10px', width:'3px'}}> </div> })} </span> </wjInItem> })} </wjIn> ```请注意，此处的Menu组件未使用其itemsSource属性绑定数据数组。相反，它直接从数据数组中生成子MenuItem组件。
命令（Commands）
您现在可以用声明的方式，定义绑定带参数/命令的菜单项。MenuItem组件从其接口中公开了cmd和cmdParam属性，这些属性可以分别绑定命令及其参数。
下面的代码示例演示了：如何使用这些属性来定义递增或递减的菜单项。其中，每个项目表示作为命令参数指定的不同增量值：
``` <wjIn header="Tax Commands" id="changeTax" command={}> <wjInItem cmd={} cmdParam={0.50}> Increment by 50% </wjInItem> <wjInItem cmd={} cmdParam={0.25}> Increment by 25% </wjInItem> <wjInItem cmd={} cmdParam={0.05}> Increment by 5% </wjInItem> <wjInSeparator></wjInSeparator> <wjInItem cmd={} cmdParam={-0.05}> Decrement by 5% </wjInItem> <wjInItem cmd={} cmdParam={-0.25}> Decrement by 25% </wjInItem> <wjInItem cmd={} cmdParam={-0.50}> Decrement by 50% </wjInItem> </wjIn> ```值选择器（Value Picker）
随着MenuItem组件的引入，Menu现在可以用作值选择器。MenuItem组件的value属性包含了与该项关联的值。
WijmoJS 的菜单本身就具有value属性，其值显示在菜单标题旁边，其属性可以绑定到父组件状态，而其中的itemClicked事件可用于更新与所选菜单项关联值的状态。此示例演示了可用于选择浏览器名称的菜单：
``` render() { return <wjIn header="Run" value={} itemClicked={}> <wjInItem value="IE">Internet Explorer</wjInItem> <wjInItem value="Chrome">Chrome</wjInItem> <wjInItem value="FF">FireFox</wjInItem> <wjInItem value="Safari">Safari</wjInItem> <wjInItem value="Opera">Opera</wjInItem> </wjIn> } splitButtonItemClicked = (menu) => { ({ browser: menu. }); }; ```项目模板（Item Templates）
您可以使用formatItem事件为纯JS的列表类控件创建自定义项目内容，如ListBox、ComboBox、MultiSelect和Menu。相应的React组件允许您使用JSX标记以声明方式定义项目内容。
此外，对于每个提到的组件，WijmoJS都会公开一个名为“wjItemTemplate”的渲染道具，它允许您指定绘制项目内容的渲染函数。例如，此示例演示了：通过标记绘制了一个字形，其名称取自源数组：
``` <wjIn displayMemberPath="country" itemsSource={} selectedIndexChanged={} initialized={} wjItemTemplate={(context: wjIn)=>( <div> <div className="wj-glyph"> <span className={`wj-glyph-${con}`}></span> </div> {con} </div> )}> </wjIn> ```注意，wjItemTemplate渲染函数提供了一个上下文参数，该参数用以带来有关当前绘图项的信息对象，它公开了以下属性：
· item - 正在呈现其内容的数据项
· itemIndex - 要呈现的项的索引
· control - 由React组件表示的底层纯JS控件
MultiSelect 组件
MultiSelect组件与其他类似列表的控件相比具备一个显著特征：其每个项目都包含了一个复选框，用于更改项目的已检查状态。
在使用项目模板进行项目自定义时，此功能也可以保留。与往常一样，项目模板中type =“checkbox”的第一个输入元素将用作检查状态开关。
此示例中的代码定义了包含此类复选框的项目模板：
``` <wjIn displayMemberPath="name" headerPath="name" placeholder="Countries" itemsSource={} showSelectAllCheckbox={} checkedItemsChanged={(this)} wjItemTemplate={(context: wjIn)=>( <div className="item"> <label><input type="checkbox"/>{con.name}</label> <br/> <b>{con.city}</b> ({con.state})<br/> {con.address}<br/> Phone: <b>{con.phone}</b><br/> Fax: <b>{con.fax}</b><br/> Website: <a href="{con.site}" target="_blank">{con.site}</a><br/> </div> )}> </wjIn> ```菜单（Menu）
在上面的介绍中，我们已经向您演示了如何从一组数据项，动态创建MenuItem组件。下面将介绍的wjitemTemplate渲染属性是实现此类功能的另一种方法。
使用此方法，Menu组件应该绑定到一个项目数组中，而wjItemTemplate render prop定义一个用于呈现每个项目的模板。
例如，此示例中的代码片段显示绑定到音乐家数组的菜单的自定义项：
``` header="Artists" itemClicked={} itemsSource={} maxDropDownHeight={300} wjItemTemplate={(context: wjIn)=>( <div style={{minWidth: '160px'}}> {conIndex + 1}. <b>{con.name}</b> {con.photo ? <div> <img src={con.photo} height="50" /> </div> : null} </div> )}> </wjIn> ```结论
WijmoJS全新的MenuItem组件和wjItemTemplate渲染道具，全面提升了WijmoJS列表类组件的自定义扩展能力和便捷性。
毫不夸张的说，使用WijmoJS前端开发工具包，您现在可以通过传统的JSX标记，绑定带有其他应用程序组件的丰富项目，并定义其内容。
关于WijmoJS
WijmoJS 前端开发工具包由多款灵活高效、零依赖、轻量级的纯前端控件组成，如表格控件 FlexGrid、图表控件 FlexChart、数据分析 OLAP 等，完美支持原生 Java，以及 Angular、React、Vue、Type、Knockout 和 Ionic 等框架，可用于企业快速构建桌面、移动 Web 应用程序。