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设置，幸运的是docs提供了一个例子：

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中使用该对象（模块：＆amp; formats :)。对不起，反应还不太好......

你能给我一个例子吗？

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

Answer 1

当使用ES6类时，如果要创建this.modules和this.formats，则可以使用当前不属于JS规范的类字段（https://github.com/tc39/proposal-class-fields）。

如果您使用的是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示例中的方法相同。

如何将代码从`React.createClass`更改为`class NoteNew扩展Component`并使其工作

1 个答案: