ReactQuill富文本-错误：React.Children.only仅预期接收单个React元素子元素-React

问题描述

我有一个表单，并且根据本教程（https://www.youtube.com/watch?v=DjEANvaZFv0&feature=youtu.be），我用Reactquill替换了textarea以获得Rich Text。但是一旦完成，我会收到一条错误消息，提示“错误：React.Children.only预期会收到一个React元素孩子”（请参见下面的屏幕截图）。

这只是在我用Reactquill替换了textarea之后才出现的，但是在错误页面上它显示了我用Firebase实现google身份验证的App.js中的代码，并且我不确定两者之间的连接方式。我该如何解决？

这是我的 AddArticle.js ，其中的表单是：

import React,{ Component } from "react";
import firebase from "../Firebase";
import Reactquill from "react-quill";
import "react-quill/dist/quill.sNow.css";
import renderHTML from 'react-render-html';

class AddArticle extends Component {
  constructor() {
    super();
    this.ref = firebase.firestore().collection("articles");
    this.state = {
      title: "",content: "",};
  }
  onChange = (e) => {
    const state = this.state;
    state[e.target.name] = e.target.value;
    this.setState(state);
  };

  onBodyChange(e) {
    this.setState({ content: e });
  }

  onSubmit = (e) => {
    e.preventDefault();

    const { title,content } = this.state;

    this.ref
      .add({
        title,content,})
      .then((docRef) => {
        this.setState({
          title: "",});
        this.props.history.push("/");
      })
      .catch((error) => {
        console.error("Error adding document: ",error);
      });
  };

  render() {
    const { title,content } = this.state;
    return (
      <div className="container">
        <br></br>
        <br></br>
        <br></br>
        <div className="panel panel-default">
          <div className="panel-heading">
            <h3 className="panel-title text-center">Create a new article</h3>
          </div>
          <br></br>
          <br></br>
          <div className="panel-body">
            <form onSubmit={this.onSubmit}>
              <div className="form-group input-group-lg">
                <label for="title">Title:</label>
                <input
                  type="text"
                  className="form-control"
                  name="title"
                  value={title}
                  onChange={this.onChange}
                  placeholder="Title"
                />
              </div>
              <div className="form-group">
                <label for="content">Content:</label>
                <Reactquill
                  modules={AddArticle.modules}
                  formats={AddArticle.formats}
                  name="content"
                  onChange={this.onBodyChange}
                  placeholder="Content"
                  cols="80"
                  rows="20"
                >
                  {content}
                </Reactquill>
              </div>
              <button type="submit" className="btn btn-success">
                Submit
              </button>
            </form>
          </div>
        </div>
      </div>
    );
  }
}

// quill Config
AddArticle.modules = {
  toolbar: [
    [{ header: [1,2,3,4,5,6,false] }],[{ size: [] }],["bold","italic","underline","strike","blockquote"],[
      { list: "ordered" },{ list: "bullet" },{ indent: "-1" },{ indent: "+1" },],["link","image","video"],["clean"],["code-block"],clipboard: {
    // toggle to add extra line breaks when pasting HTML:
    matchVisual: false,},};

AddArticle.formats = [
  "header","font","size","bold","blockquote","list","bullet","indent","link","video","code-block",];

export default AddArticle;

以下是我的 App.js ：

import React,{ Component } from "react";
import "./App.css";
import Navbar from "./components/Navbar";
import Main from "./Main";
import firebase from "firebase";
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";


class App extends Component {
  state={isSignedIn:false}
  uiConfig = {
    signInFlow: "popup",signInoptions: [
      firebase.auth.GoogleAuthProvider.PROVIDER_ID
    ],callbacks: {
      signInSuccess: () => false
    }
  }

  componentDidMount = () => {
    firebase.auth().onAuthStateChanged(user => {
      this.setState({isSignedIn:!!user})
    })
  }

  render() {
    return (
      <div>
        {this.state.isSignedIn ? (
          <span>
            <Navbar />
            <Main />
          </span>
        ) :
        (
          <StyledFirebaseAuth
            uiConfig={this.uiConfig}
            firebaseAuth={firebase.auth()}
            />
        )}
      </div>
    );
  }
}

export default App;

解决方法

如here所述，我建议将内容作为ReactQuill的值传递，而不是使其成为子代：

<ReactQuill
    value={this.state.content}
    // ... other props are OK
/> // Close the tag: no children