如何将代码从“React.createClass”更改为“class NoteNew extend Component”

Question

很抱歉我的问题不是很聪明，但我有这样的组件(使用 ES6 类(。

import React, { Component } from 'react';
import ReactQuill from 'react-quill';
import { Field, reduxForm } from 'redux-form';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { addNote } from '../actions/actions';
class NoteNew extends Component {
  constructor(props) {
    super(props);
    this.state = {
      content: '',
    };
  }
  handleContentChange(value) {
    this.setState({ content: value });
  }
  onNoteReadySumbit(values) {
    const content = this.state.content;
    const currentTime = this.formatDateAndHour();
    const currentTimeRaw = new Date();
    this.props.addNote(
      { ...values, content, createTime: currentTime, timeRaw: currentTimeRaw },
      () => this.props.history.push('/')
    );
  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <div className="row form-fields text-center">
        <form onSubmit={handleSubmit(this.onNoteReadySumbit.bind(this))}>

          <ReactQuill
            value={this.state.content}
            onChange={this.handleContentChange.bind(this)}
            name="content"
            labelToShow="content"
            component={this.renderFieldContent}
          />

          <button type="submit" className="btn btn-secondary submit-button">
            <i className="fa fa-check" aria-hidden="true" />
          </button>
          <Link to="/" className="btn btn-secondary back-button">
            <i className="fa fa-times" aria-hidden="true" />
          </Link>
        </form>
      </div>
    );
  }
}
function validate(values) {
  const errors = {};
  if (!values.title || values.title.length < 3) {
    errors.title = 'Enter note title that is at least 3 characters long!';
  }
  return errors;
}
function mapStateToProps(state) {
  return {
    addNoteStatus: state.addNoteStatus,
  };
}
export default reduxForm({
  validate,
  form: 'NoteNewFormUnique',
})(connect(mapStateToProps, { addNote })(NoteNew));

我想使用 react-quill 设置，幸运的是文档提供了一个示例：

var MyComponent = React.createClass({
  modules: {
    toolbar: [
      [{ 'header': [1, 2, false] }],
      ['bold', 'italic', 'underline','strike', 'blockquote'],
      [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
      ['link', 'image'],
      ['clean']
    ],
  },
  formats: [
    'header',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image'
  ],
  render: function() {
    return (
      <div className="text-editor">
        <ReactQuill theme="snow"
                    modules={this.modules}
                    formats={this.formats}>
        </ReactQuill>
      </div>
    );
  },
});

所以这个例子是使用React.createClass但我不知道如何在我的 ES6 class NoteNew extends Component中使用该对象(模块：和格式：(。对不起，反应还不太好...

你能给我举个例子吗？

TL;DR 我想在我的<ReactQuill中添加一些设置，但我不知道如何在我的class NoteNew extends Component代码中使用这个旧的React.createClass示例......

Answer 1

使用

ES6 类时，如果你想创建 this.modules 和 this.format，你可以使用类字段 (https://github.com/tc39/proposal-class-fields(，它目前不是 JS 规范的一部分。

如果你正在使用 Babel，那么你可以使用这个插件：https://babeljs.io/docs/plugins/transform-class-properties/

class NoteNew extends Component {
  modules: {
    toolbar: [
      [{ 'header': [1, 2, false] }],
      ['bold', 'italic', 'underline','strike', 'blockquote'],
      [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
      ['link', 'image'],
      ['clean']
    ]
  }
  formats: [
    'header',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image'
  ]
  ...
}

如果不想使用此转换，则可以将它们放在构造函数中。

class NoteNew extends Component {
  constructor(props) {
    super(props);
    this.state = {
      content: '',
    };
    this.modules = ...
    this.formats = ...
  }
}

在此之后，您的render()方法将与 createClass 示例中的方法相同。