2

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

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

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

4

1 回答 1

0

确保正确导出和导入类。此外，您还将所有依赖项导入到单元文件中。这是文件的完整版本：

编辑器Cell.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>
      );
    }
  }

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

import DropDownCell from './editorCell.js';

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

于 2018-02-27T08:21:31.347 回答