尝试添加富文本编辑器,并且正在标题中遇到错误。基本上,我需要知道如何在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
答案 0 :(得分:0)
您必须在组件内部声明一个静态属性。下面的代码。
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