Question

尝试添加富文本编辑器，并且正在标题中遇到错误。基本上，我需要知道如何在TypeScript中声明类组件具有的属性。这是一个反应项目。有人有想法么？这是代码。我遇到的部分是关于.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

属性“模块”在类型“ typeof MyEditor”上不存在。ts（2339）

1 个答案: