Javascript ReactQuill（富文本）-错误：React.Children.仅应接收单个React元素子级-React

我有一个表单，基于本教程（）我用ReactQuill替换了textarea以获得富文本。然而，一旦我这样做了，我就收到了一个错误，上面写着“error:React.Children.只希望收到一个React元素child”（参见下面的屏幕截图）

这是在我用ReactQuill替换了textarea之后出现的，但在错误页面上，它向我显示了App.js中的代码，在那里我用firebase实现了google身份验证，我不确定这两者是如何连接的。我该如何解决这个问题

下面是我的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: "",
          content: "",
        });
        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",
  "italic",
  "underline",
  "strike",
  "blockquote",
  "list",
  "bullet",
  "indent",
  "link",
  "image",
  "video",
  "code-block",
];

export default AddArticle;

import React，{Component}来自“React”；
从“./firebase”导入firebase；
从“react quill”导入react quill；
导入“react quill/dist/quill.snow.css”；
从“react render html”导入renderHTML；
类AddArticle扩展组件{
构造函数（）{
超级（）；
this.ref=firebase.firestore（）集合（“文章”）；
此.state={
标题：“，
内容：“，
};
}
onChange=（e）=>{
const state=this.state；
状态[e.target.name]=e.target.value；
本.设置状态（状态）；
};
onBodyChange（e）{
this.setState（{content:e}）；
}
onSubmit=（e）=>{
e、 预防默认值（）；
const{title，content}=this.state；
这个.ref
.添加({
标题
内容,，
})
。然后（（docRef）=>{
这是我的国家({
标题：“，
内容：“，
});
this.props.history.push（“/”）；
})
.catch（（错误）=>{
console.error（“添加文档时出错：”，错误）；
});
};
render（）{
const{title，content}=this.state；
返回(









创建一篇新文章






标题：
内容：
{content}
提交
);
}
}
//纬管配置
AddArticle.modules={
工具栏：[
[{header:[1,2,3,4,5,6，false]}，
[{size:[]}]，
[“粗体”、“斜体”、“下划线”、“删除”、“块引号”]，
[
{list:“有序”}，
{list:“bullet”}，
{缩进：“-1”}，
{缩进：“+1”}，
],
[“链接”、“图像”、“视频”]，
[“干净”]，
[“代码块”]，
],
剪贴板：{
//切换以在粘贴HTML时添加额外的换行符：
对:错,，
},
};
AddArticle.formats=[
“标题”，
“字体”，
“大小”，
“粗体”，
“斜体”，
“下划线”，
“罢工”，
“区块报价”，
“名单”，
“子弹”，
“缩进”，
“链接”，
“图像”，
“视频”，
“代码块”，
];
导出默认的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;

import React，{Component}来自“React”；
导入“/App.css”；
从“/components/Navbar”导入导航栏；
从“/Main”导入Main；
从“firebase”导入firebase；
从“react firebaseui/StyledFirebaseAuth”导入StyledFirebaseAuth；
类应用程序扩展组件{
状态={isSignedIn:false}
uiConfig={
signInFlow:“弹出”，
签署：[
firebase.auth.GoogleAuthProvider.PROVIDER\u ID
],
回调：{
SignInsAccess:（）=>false
}
}
componentDidMount=（）=>{
firebase.auth（）.onAuthStateChanged（用户=>{
this.setState（{isSignedIn:！！user}）
})
}
render（）{
返回(
{this.state.isSignedIn(
) :
(
)}
);
}
}
导出默认应用程序；

如前所述，我建议将内容作为ReactQuill的值传递，而不是将其作为子对象：

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

//关闭标记：无子项

谢谢！我现在必须处理不同类型的错误，但你是对的！如果您能看到新的错误，我将不胜感激-->我很高兴它有所帮助。对于您的新错误，我看到了两个问题：第一，您不应该像现在这样改变状态，第二，e.target.name在我看来是正确的，其他的东西在起作用。我建议你用控制台来找出，快乐编码！this.setState（{[e.target.name]：e.target.value}）我仍然会收到相同的错误，但很好，我会继续尝试。非常感谢您的指导！