javascript - ReactJs:无效的 DOM 属性 `classname` 错误

Question

我正在将 HTML 字符串解析为 React.js，并使用上一篇文章 React.js: Raw HTML string does not gets recognized as HTML elements from Node.js 中建议的“ReactHtmlParser”将其渲染为 HTML 元素。 。现在，我尝试通过执行以下操作在其上添加 Bootstrap 样式属性:

app.get('/myCart', (req, res) => {
  var data;
  var htmlString ="";
  var total = 0;

  MongoClient.connect(url, { useNewUrlParser: true }, function(err, db) {
    if (err) throw err;
    var dbo = db.db("cart");
    dbo.collection("items").find().toArray(function(err, result) {
      if (err) throw err;
      console.log("here")
      data = result
      for(let item of data){
        htmlString += "<div className=\"row\"><div className=\"col\">" + item.desc + "</div>" + "<div className=\"col\">" + item.price + "</div></div>"
        total += item.price
      }
      console.log("total is" + total)
      htmlString +="<div className=\"row\"><div>" + total + "</div><div>"
      console.log(htmlString)
      res.send({express: htmlString})
      db.close();
    });
  });

我的渲染方法:

render(){
    console.log(this.state.cartData)
    return(
        <div className="col">
            <div>{ReactHtmlParser(this.state.cartData)}</div>
        </div>
    )
}

正如你所看到的，它实际上是className而不是classname。但是，当我将其渲染到前端时，出现错误，指出 Invalid DOM property classname。您的意思是 className

我真的不知道，因为我只将 className 作为属性。和ReactHtmlParser有关系吗？

Answer 1

ReactHTMLParser 解析 HTML，因此您必须使用 HTML class 属性。

如果您使用className，解析器将小写属性，因为 html props 始终小写，从而导致您收到错误。