ReactQuill (rich text) - Error: React.Children.only expected to receive a single React element child - React

Question

我有一个表单，我根据本教程（https://www.youtube.com/watch?v=DjEANvaZFv0&feature=youtu.be）用 ReactQuill 替换了 textarea 以获得富文本。但是一旦我这样做了，我就收到一条错误消息 'Error: React.Children.only expected to receive a single React element 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;

这是我的 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;

Answer 1

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

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

ReactQuill (rich text) - Error: React.Children.only expected to receive a single React element child - React

ReactQuill (rich text) - Error: React.Children.only expected to receive a single React element child - React

javascript

reactjs

react-quill