Javascript getElementByID+。appendhild（）[TypeError:未能在'；节点'；上执行'；appendChild'；：参数1的类型不是'；节点'；]

我有一个名为“Article”的自定义组件，我正试图通过从数据库中获取它们并将它们呈现为“Article”组件来显示所有的文章

函数渲染说明（doc）{
var article=''
document.getElementById（'articles-list'）.appendChild（article）
}
const db=firebase.firestore（）
db.collection（'articles'）.get（）。然后（（快照）=>{
snapshot.docs.forEach（doc=>{
效果图（文档）
})
})

用于将字符串作为HTML插入。第一个参数是添加HTML的位置。第二个参数是要插入的HTML

function renderArticle(doc){
    var article = '<Article name="' + doc.data().name + '" content="' + doc.data().content + '" id="' + doc.data().id + '"/>';
    document.getElementById('articles-list').insertAdjacentHTML('beforeend', article);
}

确保导入

ReactDOM

模块以正确使用它。将导入放在脚本的顶部

import ReactDOM from 'react-dom'

---

正如@Calvin Nunes所说，您需要向document.createElement（）传递一个节点，但在标记reactjs时，您可能也需要一些建议

在React中，我们呈现异步数据（例如，从数据库中获取的文档）的方式是跟踪它们进入组件状态

在第一个时刻，我们呈现null或一些加载指示符，并发出请求以获取数据。当加载数据时，我们设置状态，因此我们的组件将重新渲染，我们可以渲染处于该状态的内容

如果您使用的组件具有生命周期，则您的代码如下：

import React, {Component} from 'react';

class ArticleList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      docs: null,
    };
  }

  componentDidMount() {
    db.collection('articles').get().then((snapshot) => {
      this.setState({docs: snapshot.docs});
    })
  }

  render() {
    if (docs === null) return null;
    return (
      <div>
        {docs.map((doc) => {
          return (
            <Article
              content={doc.data().content}
              key={doc.data().id}
              id={doc.data().id}
              name={doc.data().name}
            />
          );
        })}
      </div>
    );
  }
}

export default ArticleList;

import React, {useEffect, useState} from 'react';
import Article from './Article'; // your other component

function ArticleList () {
  const [docs, setDocs] = useState(null);
  const db = firebase.firestore();
  useEffect(() => {
    db.collection('articles').get().then((snapshot) => {
      setDocs(snapshot.docs);
    })
  }, [db, setDocs]);
  if (docs === null) return null;
  return (
    <div>
      {docs.map((doc) => {
        return (
          <Article
            content={doc.data().content}
            key={doc.data().id}
            id={doc.data().id}
            name={doc.data().name}
          />
        );
      })}
    </div>
  );
}

export default ArticleList;

import React，{Component}来自'React'；
类ArticleList扩展组件{
建造师（道具）{
超级（道具）；
此.state={
docs:null，
};
}
componentDidMount（）{
db.collection（'articles'）.get（）。然后（（快照）=>{
this.setState（{docs:snapshot.docs}）；
})
}
render（）{
如果（单据===null）返回null；
返回(
{docs.map（（doc）=>{
返回(
);
})}
);
}
}
导出默认项目列表；

如果使用带有挂钩的函数，则代码如下：

import React, {Component} from 'react';

class ArticleList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      docs: null,
    };
  }

  componentDidMount() {
    db.collection('articles').get().then((snapshot) => {
      this.setState({docs: snapshot.docs});
    })
  }

  render() {
    if (docs === null) return null;
    return (
      <div>
        {docs.map((doc) => {
          return (
            <Article
              content={doc.data().content}
              key={doc.data().id}
              id={doc.data().id}
              name={doc.data().name}
            />
          );
        })}
      </div>
    );
  }
}

export default ArticleList;

import React, {useEffect, useState} from 'react';
import Article from './Article'; // your other component

function ArticleList () {
  const [docs, setDocs] = useState(null);
  const db = firebase.firestore();
  useEffect(() => {
    db.collection('articles').get().then((snapshot) => {
      setDocs(snapshot.docs);
    })
  }, [db, setDocs]);
  if (docs === null) return null;
  return (
    <div>
      {docs.map((doc) => {
        return (
          <Article
            content={doc.data().content}
            key={doc.data().id}
            id={doc.data().id}
            name={doc.data().name}
          />
        );
      })}
    </div>
  );
}

export default ArticleList;

import React，{useffect，useState}来自“React”；
从“./Article”导入文章；//您的其他组件
函数ArticleList（）{
const[docs，setDocs]=useState（null）；
const db=firebase.firestore（）；
useffect（（）=>{
db.collection（'articles'）.get（）。然后（（快照）=>{
setDocs（snapshot.docs）；
})
}，[db，setDocs]）；
如果（单据===null）返回null；
返回(
{docs.map（（doc）=>{
返回(
);
})}
);
}
导出默认项目列表；

---

为了只运行一次useEffect钩子，您可能还需要记住db对象，但这不是重点。

因为您试图附加字符串，字符串不是节点如果您想使用

appendChild

您需要创建一个节点元素，使用

var article=document.createElement（“article”）

例如。或者，如果您想使用html字符串，我建议您不要这样做，那么请使用：

.innerHTML=article

@CalvinNunes我创建document.createElement（“article”）但是我必须在这个组件中放置两个道具，我该如何做呢？@CalvinNunes我建议您只使用

element.insertAdjacentText（“beforeed”，“text”）

而不是

innerHTML

@G.Alp您应该阅读一些有关您正在编程的语言的内容。。。从这个链接开始谢谢，错误消失了，但仍然没有显示任何内容。我已经修改了答案，使之符合React。请再试一次。控制台返回：Uncaught SyntaxError：意外标识如果您想让我显示生命周期方式而不是hooks方式，请让我知道。我认为生命周期对我来说更容易。。。在我的教程中，他已经解释过了：3出于好奇，这是什么意思：index.js:1警告：列表中的每个孩子都应该有一个唯一的“key”道具。检查

文章列表

的呈现方法。有关详细信息，请参阅“[url]”。抱歉，这是我的错误。当呈现组件列表时，我们需要为每个组件提供一个唯一的关键道具。React在内部使用这个键来知道何时更新DOM。我将修复代码，因此您的doc.data（）.id可能不是唯一的。检查一下。在最后一种情况下，您可以使用数组索引号作为键，但不建议这样做，您应该在这样做之前研究原因。