Question

从draft-js文档中，可以（在vanilla React中，没有打字稿）设置Draft-js环境，注意onChange属性可以直接在构造函数中声明：

import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    const {editorState} = this.state;
    return <Editor editorState={editorState} onChange={this.onChange} />;
  }
}

然而，当我尝试使用Typescript / React（下面的代码）做同样的事情时，我收到此错误

错误TS2339：属性'onChange'在'Main'类型上不存在。

class Main extends React.Component<MainProps, MainState> {

    constructor(props) {
    super(props);
    this.state = { todos: [], editorState: EditorState.createEmpty() };
    this.onChange = (editorState) => this.setState({ editorState });
  }

我还尝试将onChange作为属性添加到道具

interface MainProps {
    model: Model;
    onChange: Function;
}

在typescript / react中声明这样的函数属性的适当方法是什么？

Answer 1

试试这个：

class Main extends React.Component<MainProps, MainState> {
    constructor(props) {
        super(props);
        this.state = { todos: [], editorState: EditorState.createEmpty() };
        this.onChange = (editorState) => this.setState({ editorState });
    }

    onChange: (state: MainState) => void;

}

我还没有对它进行测试，但我认为它应该可行。

修改

是的，那里有一个我没有注意到的问题，它应该是：

class Main extends React.Component<MainProps, MainState> {
    constructor(props) {
        super(props);

        this.state = { todos: [], editorState: EditorState.createEmpty() };
        this.onChange = (editorState) => this.setState({
            editorState: editorState
        } as MainState);
    }

    onChange: (state: MainState) => void;

}

如果as MainState属性不是可选的，那么type assertion（todos}是必需的，如果它是可选的（todos?: any[]）则需要onChange不需要断言。

对于onChange: (state: MainState) => void;定义似乎重复的内容，在Mixins part of the typescript docs中简要解释，但在您的示例中，类中的定义：

Main

让编译器知道onChange的实例有一个名为MainState的方法，它接收void并返回this.onChange = (editorState) => this.setState({ editorState });。
但是只有在ctor中创建实例时才会分配此方法的实现：

property 'onChange' does not exist on type 'Main'

如果缺少定义，则ctor中的赋值将产生编译错误：8799,,2015-06-29 04:00:00+0000, FIT-I6-INL-PCG,['3.MYFIT-LTR-DYN'],2015-03-11 04:00:00+0000,。

Answer 2

你可以像这样使用handleChange方法：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Editor, EditorState } from 'draft-js';

interface MyEditorProps {
}

class MyEditor extends React.Component<MyEditorProps, any> {
  constructor(props: MyEditorProps) {
    super(props);

    this.state = { editorState: EditorState.createEmpty() };
  }
  handleChange(e: EditorState) {
    this.setState({ editorState: e });
  }
  render() {
    return (
      <Editor editorState={this.state.editorState} onChange={e => this.handleChange(e)} />
    );
  }
}

ReactDOM.render(
  <MyEditor />,
  document.getElementById('editor'),
);

export { MyEditor }

Answer 3

或者，你可以这样试试：

private onChange = (editorState) => this.setState({ editorState } as MainState)

只是在类的主体中，您可以在其中定义其他类属性。我不知道，您正在运行哪个版本，但此代码完全适用于ES2015和TypeScript 2.0.10

声明构造函数中的属性与typescript反应

3 个答案:

修改