React img 被危险地设置为内部 html？答案

【问题标题】：React img is dangerously set inner html?React img 被危险地设置为内部 html？
【发布时间】：2020-10-18 09:34:03
【问题描述】：

这是我拥有的一些代码，但给了我一个错误。我不知道错误是什么意思以及为什么它没有显示。

import React from "react";
import "./Card.css";

export default function Card() {
  return (
    <div class='card'>
        <img src='img_avatar.png' alt="Avatar" style='width:100%'> </img>
        <div class='container'>
            <h4><b>Devware</b></h4>
            <p>Description</p>
        </div>
    </div>
  )
}

我收到以下错误：

Error: img is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.

这是什么意思？

【问题讨论】：

标签： html reactjs frontend

【解决方案1】：

这是因为您在打开的 <img> 和关闭的 </img> 标记之间有一个无效的空格，React style 属性应该是一个对象，class 应该是 className，因为类是保留的 javascript word 所以你的 Card 组件应该是这样的

export default function Card() {
    return (
        <div className='card'>
            <img src='img_avatar.png' alt="Avatar" style={{ width: '100%' }} />
            <div className='container'>
                <h4><b>Devware</b></h4>
                <p>Description</p>
            </div>
        </div>
    )
}

【讨论】：