在react中使用antd創(chuàng)建可編輯的表格，使用createContext( )報(bào)錯(cuò)？

1.在react中使用antd創(chuàng)建可編輯行元素的表格，
官方文檔中是這樣寫(xiě)的：
import { Table, Input, InputNumber, Popconfirm, Form } from 'antd';

const data = [];
for (let i = 0; i < 100; i++) {
data.push({

key: i.toString(),
name: `Edrward ${i}`,
age: 32,
address: `London Park no. ${i}`,

});
}
const FormItem = Form.Item;
const EditableContext = React.createContext();

const EditableRow = ({ form, index, ...props }) => (
<EditableContext.Provider value={form}>

<tr {...props} />

</EditableContext.Provider>
);

const EditableFormRow = Form.create()(EditableRow);

class EditableCell extends React.Component {
getInput = () => {

if (this.props.inputType === 'number') {
  return <InputNumber />;
}
return <Input />;

};
render() {

const {
  editing,
  dataIndex,
  title,
  inputType,
  record,
  index,
  ...restProps
} = this.props;
return (
  <EditableContext.Consumer>
    {(form) => {
      const { getFieldDecorator } = form;
      return (
        <td {...restProps}>
          {editing ? (
            <FormItem style={{ margin: 0 }}>
              {getFieldDecorator(dataIndex, {
                rules: [{
                  required: true,
                  message: `Please Input ${title}!`,
                }],
                initialValue: record[dataIndex],
              })(this.getInput())}
            </FormItem>
          ) : restProps.children}
        </td>
      );
    }}
  </EditableContext.Consumer>
);

}
}

class EditableTable extends React.Component {
constructor(props) {

super(props);
this.state = { data, editingKey: '' };
this.columns = [
  {
    title: 'name',
    dataIndex: 'name',
    width: '25%',
    editable: true,
  },
  {
    title: 'age',
    dataIndex: 'age',
    width: '15%',
    editable: true,
  },
  {
    title: 'address',
    dataIndex: 'address',
    width: '40%',
    editable: true,
  },
  {
    title: 'operation',
    dataIndex: 'operation',
    render: (text, record) => {
      const editable = this.isEditing(record);
      return (
        <div>
          {editable ? (
            <span>
              <EditableContext.Consumer>
                {form => (
                  <a
                    href="javascript:;"
                    onClick={() => this.save(form, record.key)}
                    style={{ marginRight: 8 }}
                  >
                    Save
                  </a>
                )}
              </EditableContext.Consumer>
              <Popconfirm
                title="Sure to cancel?"
                onConfirm={() => this.cancel(record.key)}
              >
                <a>Cancel</a>
              </Popconfirm>
            </span>
          ) : (
            <a onClick={() => this.edit(record.key)}>Edit</a>
          )}
        </div>
      );
    },
  },
];

}
isEditing = (record) => {

return record.key === this.state.editingKey;

};
edit(key) {

this.setState({ editingKey: key });

}
save(form, key) {

form.validateFields((error, row) => {
  if (error) {
    return;
  }
  const newData = [...this.state.data];
  const index = newData.findIndex(item => key === item.key);
  if (index > -1) {
    const item = newData[index];
    newData.splice(index, 1, {
      ...item,
      ...row,
    });
    this.setState({ data: newData, editingKey: '' });
  } else {
    newData.push(data);
    this.setState({ data: newData, editingKey: '' });
  }
});

}
cancel = () => {

this.setState({ editingKey: '' });

};
render() {

const components = {
  body: {
    row: EditableFormRow,
    cell: EditableCell,
  },
};

const columns = this.columns.map((col) => {
  if (!col.editable) {
    return col;
  }
  return {
    ...col,
    onCell: record => ({
      record,
      inputType: col.dataIndex === 'age' ? 'number' : 'text',
      dataIndex: col.dataIndex,
      title: col.title,
      editing: this.isEditing(record),
    }),
  };
});

return (
  <Table
    components={components}
    bordered
    dataSource={this.state.data}
    columns={columns}
    rowClassName="editable-row"
  />
);

}
}

ReactDOM.render(<EditableTable />, mountNode);
我是按照官方文檔來(lái)寫(xiě)的，代碼中加粗部分就是我出錯(cuò)的地方。
2.報(bào)錯(cuò)如下：

app.js:149015 Uncaught TypeError: _react2.default.createContext is not a function