如何将 Kendo React 组件提取到自己的文件中

Question

我正在关注 React 的 Kendo UI 的在线文档，其中一部分遇到了一些麻烦。在链接中的示例和下面部分复制的示例中，有一个文件包含我要重用的组件的 react 代码。它看起来像：

class DropDownCell extends GridCell {
    handleChange(e) {
        this.props.onChange({
            dataItem: this.props.dataItem,
            field: this.props.field,
            syntheticEvent: e.syntheticEvent,
            value: e.target.value
        });
    }
    render() {
        const value = this.props.dataItem[this.props.field];
        if (!this.props.dataItem.inEdit) {
            return (
                <td> {
                    (value === null) ? '' : this.props.dataItem[this.props.field].toString()}
                </td>
            );
        }
        return (
            <td>
                <DropDownList
                    style={{ width: "100px" }}
                    onChange={this.handleChange.bind(this)}
                    value={value}
                    data={[
                        { text: 'yes', value: true },
                        { text: 'no', value: false },
                        { text: '(empty)', value: null }
                    ]}
                    valueField="value"
                    textField="text"
                />
            </td>
        );
    }
}

在同一文件中有一个实现上述组件的 React 类。该类的呈现方法如下所示：

render() {
    return (
        <div>
            <Grid
                data={this.state.data}
                itemChange={this.itemChange}
                editField="inEdit"
            >
                <GridColumn field="ProductID" title="Id" width="50px" editable={false} />
                <GridColumn field="ProductName" title="Product Name" />
                <GridColumn field="FirstOrderedOn" title="First Ordered" editor="date" format="{0:d}" />
                <GridColumn field="UnitsInStock" title="Units" editor="numeric" />
                <GridColumn field="Discontinued" cell={DropDownCell} />
            </Grid>
        </div>
    );
}

我想通过 props 将数据从网格的父组件向下传递到网格到 DropDownCell 组件。但是每次我尝试创建一个单独的 DropDownCell 文件并将其导入我的 Grid 类时，我都无法再让 DropDownCell 工作了。我该怎么做才能从 DropDownCell 类在其自己的文件中创建一个可重用的反应组件，并让它在我的网格中呈现？

Answer 1

确保正确导出和导入类。并且您还可以将所有依赖项导入到单元格文件中。这是该文件的完整版本：

编辑器单元格.js：

  import React from 'react';
  import ReactDOM from 'react-dom';
  import { GridCell } from '@progress/kendo-react-grid';
  import { DropDownList } from '@progress/kendo-react-dropdowns';
  export default class DropDownCell extends GridCell {
    handleChange(e) {
      this.props.onChange({
        dataItem: this.props.dataItem,
        field: this.props.field,
        syntheticEvent: e.syntheticEvent,
        value: e.target.value
      });
    }
    render() {
      const value = this.props.dataItem[this.props.field];
      if (!this.props.dataItem.inEdit) {
        return (
          <td> {
            (value === null) ? '' : this.props.dataItem[this.props.field].toString()}
          </td>
        );
      }
      return (
        <td>
          <DropDownList
            style={{ width: "100px" }}
            onChange={this.handleChange.bind(this)}
            value={value}
            data={[
              { text: 'yes', value: true },
              { text: 'no', value: false },
              { text: '(empty)', value: null }
            ]}
            valueField="value"
            textField="text"
          />
        </td>
      );
    }
  }

在索引.js的顶部，导入单元格：

import DropDownCell from './editorCell.js';

这是上面讨论的演示的工作版本，但在单独的文件中：https://stackblitz.com/edit/react-grid-dropdown-editor-separate