javascript - 类型 'modules' .ts(2339) 上不存在属性 'typeof MyEditor'

Question

尝试添加富文本编辑器，但遇到标题中的错误。基本上我需要知道如何在 TypeScript 中声明我的类组件具有哪些属性。这是一个 react 项目。有人有主意吗？这是代码。我遇到的部分是涉及 .modules 时。

import React from 'react';
import ReactQuill from 'react-quill'; // ES6

type modules = {

}
class MyEditor<modules> extends React.Component<any, any, {}> {
    constructor(props) {
        super(props)
        this.state = { text: this.props.text } // You can also pass a Quill Delta here
        this.handleChange = this.handleChange.bind(this)
    }
    shouldComponentUpdate(nextProps) { // error here
        if (nextProps.className) {
            return false
        }
    }
    handleChange(value) {
        this.setState({ text: value })
        this.props.gatherBody(value)
    }

    render() {

        return (

            <ReactQuill value={this.state.text}
                onChange={this.handleChange}
                modules={MyEditor.modules}
            />
        )
    }
}
MyEditor.modules = {
    toolbar: [
        [{ 'header': '1' }, { 'header': '2' }, { 'font': [] }],
        [{ size: [] }],
        ['bold', 'italic', 'underline', 'strike', 'blockquote'],
        [{ 'list': 'ordered' }, { 'list': 'bullet' },
        { 'indent': '-1' }, { 'indent': '+1' }],
        ['clean']
    ],
    clipboard: {
        // toggle to add extra line breaks when pasting HTML:
        matchVisual: false,
    }
}
export default MyEditor

Answer 1

您必须在组件内声明静态属性。代码如下。

import React, { Component } from 'react';
import ReactQuill from 'react-quill'; // ES6


class MyEditor extends React.Component<any, any, {}> {
    constructor(props) {
        super(props)
        this.state = { text: this.props.text } // You can also pass a Quill Delta here
        this.handleChange = this.handleChange.bind(this)
    }
    static modules: {} = {
        modules: {}
    }
    shouldComponentUpdate(nextProps) { // error here
        if (nextProps.className) {
            return false
        }
    }
    handleChange(value) {
        this.setState({ text: value })
        this.props.gatherBody(value)
    }

    render() {

        return (

            <ReactQuill value={this.state.text}
                onChange={this.handleChange}
                modules={MyEditor.modules}
            />
        )
    }
}
MyEditor.modules = {
    toolbar: [
        [{ 'header': '1' }, { 'header': '2' }, { 'font': [] }],
        [{ size: [] }],
        ['bold', 'italic', 'underline', 'strike', 'blockquote'],
        [{ 'list': 'ordered' }, { 'list': 'bullet' },
        { 'indent': '-1' }, { 'indent': '+1' }],
        ['clean']
    ],
    clipboard: {
        // toggle to add extra line breaks when pasting HTML:
        matchVisual: false,
    }
}
export default MyEditor