如何在React+TypeScript中动态创建Syncfusion Kanban组件并设置表头

要实现动态创建Syncfusion Kanban组件及动态列头，核心是通过数组映射生成ColumnDirective元素，以下是具体实现方案：

一、静态列写法（对比参考） #

如果是固定列，写法如下：

<ColumnsDirective>
  <ColumnDirective headerText="Active" keyField="Active" allowToggle={true} template={this.columnTemplate} />
  <ColumnDirective headerText="Work In Progress" keyField="workInProgress" allowToggle={true} template={this.columnTemplate} />
  <ColumnDirective headerText="Approved" keyField="Approved" allowToggle={true} template={this.columnTemplate} />
  <ColumnDirective headerText="Closed" keyField="Closed" allowToggle={true} template={this.columnTemplate} />
  <ColumnDirective headerText="Archive" keyField="Archive" allowToggle={true} template={this.columnTemplate} />
</ColumnsDirective>

二、动态列头实现 #

通过遍历列名数组，动态生成每个列配置：

<ColumnsDirective>
  {this.props.columnName.map((column: string) => (
    <ColumnDirective 
      key={column} 
      headerText={column} 
      keyField={column} 
      allowToggle={true} 
      template={this.columnTemplate} 
    />
  ))}
</ColumnsDirective>

三、完整动态Kanban组件示例 #

整合后的完整组件代码如下：

<KanbanComponent
  dialogOpen={this.dialogOpen.bind(this)}
  id="kanban"
  cssClass="kanban-overview"
  keyField="T_Status"
  dataSource={this.getFilteredData()}
  dragStop={(data: any) => {
    this.props.onTasksStatusChanged(data);
  }}
  enableTooltip={true}
  swimlaneSettings={{ keyField: "P_ProjectEngineer", allowDragAndDrop: true }}
  cardSettings={{
    headerField: "T_Title",
    template: this.renderCardTemplate.bind(this),
    selectionType: "Multiple"
  }}
  cardRendered={(props: any) => this.cardRenderer(props)}
>
  <ColumnsDirective>
    {this.props.columnName.map((column: string) => (
      <ColumnDirective 
        key={column} 
        headerText={column} 
        keyField={column} 
        allowToggle={true} 
        template={this.columnTemplate} 
      />
    ))}
  </ColumnsDirective>
</KanbanComponent>

关键注意事项 #

• 唯一key属性：动态生成的ColumnDirective必须添加唯一key，避免React渲染警告，这里直接用列名作为key即可
• 列名数组格式：确保this.props.columnName是字符串数组，比如["Active", "Work In Progress", "Approved"]
• 数据匹配：Kanban的keyField（示例中为T_Status）的值要和列的keyField对应，保证卡片能正确分配到对应列
• 模板定义：columnTemplate和renderCardTemplate需提前定义，用于自定义列和卡片的渲染内容

内容的提问来源于stack exchange，提问作者Ashish Prajapati