Reactjs输出未显示

问题描述

我是Reactjs的新手，正在尝试测试一个非常基本的组件，但是似乎所有的工作都在浪费时间，因为它没有显示在浏览器中。

import React,{Component,Fragment} from 'react';
import '../HealthBlock.css';

class HealthBlock extends React.Component{
    render(){
        return(
            <div>
                <div className="container">
                    <div className="block">
                        <div>
                            <h6>Total Healthy Employees</h6>
                        </div>
                        <div>
                            <div className="sec2">
                                <div className="num">55</div>
                                <div className="icon"><img src="./img/healthy logo1.svg"/></div>
                            </div>
                        </div>
                    </div>
                    <div className="block">
                        <div>
                            <h6>Total ill Employees</h6>
                        </div>
                        <div>
                            <div className="sec2">
                                <div className="num">4</div>
                                <div className="icon"><img src="./img/healthy logo2.svg"/></div>
                            </div>
                        </div>
                    </div>
                    <div className="block">
                        <div>
                            <h6>Total Employees</h6>
                        </div>
                        <div>
                            <div className="sec2">
                                <div className="num">65</div>
                                <div className="icon"><img src="./img/team (1).svg" style="width: 42.27px; height: 35.86px;"/></div>
                            </div>
                        </div>
                    </div>
                    <div className="block">
                        <div>
                            <h6>Responses Submitted</h6>
                        </div>
                        <div>
                            <div className="sec2">
                                <div className="num">59</div>
                                <div className="icon"><img src="./img/healthy logo4.svg"/></div>
                            </div>
                        </div>
                    </div>
                    <div className="block">
                        <div>
                            <h6>Responses Pending</h6>
                        </div>
                        <div>
                            <div className="sec2">
                                <div className="num">6</div>
                                <div className="icon"><img src="./img/healthy logo5.svg"/></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default HealthBlock;

解决方法

如果收到“ Invariant Violation”错误，则需要针对img删除或替换您拥有的样式属性-它不能为字符串：

<div className="icon"><img src="./img/team (1).svg" style="width: 42.27px; height: 35.86px;"/></div>

无论如何，最好在HealthBlock.css文件中组织样式。

编辑：如果要将CSS保留在其中，可以将样式的字符串版本更改为一个对象：

<div className="icon"><img src="./img/team (1).svg" style={{width: "42.27px",height: "35.86px"}}/></div>

reactjs reactjs