Reactjs 如何将剑道反应组件提取到其自己的文件中

我正在遵循React的剑道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>
        );
    }
}

class DropDownCell扩展了GridCell{
手变（e）{
这个。道具。改变({
dataItem:this.props.dataItem，
field:this.props.field，
合成事件：例如合成事件，
价值：即目标价值
});
}
render（）{
常量值=this.props.dataItem[this.props.field]；
如果（！this.props.dataItem.inEdit）{
返回(
{
（值===null）？“”：this.props.dataItem[this.props.field].toString（）}
);
}
返回(
);
}
}

同一个文件中有一个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>
    );
}

render（）{
返回(
);
}

---

我想通过道具将数据从我的网格的父组件向下通过网格传递到DropDownCell组件。但每次我尝试创建一个单独的DropDownCell文件并将其导入到我的Grid类时，我都无法让DropDownCell继续工作。如何从DropDownCell类在其自己的文件中创建可重用的react组件，并使其在我的网格中呈现？

请确保正确导出和导入该类。此外，还需要将所有依赖项导入单元格文件。以下是文件的完整版本：

editorCell.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>
      );
    }
  }

这是上面讨论的演示的工作版本，但在单独的文件中：

import DropDownCell from './editorCell.js';