为什么在react呈现组件页面时会显示css文本？

出于某种原因，我的css文本显示在我的页面中。我想知道这是否与导入css有关？我删掉了jsx中的一些代码。 我已将webpack配置为使用css

import React，{Component}来自'React'；
导入“../css/style.css”；
从“../res/img_profile_pic.png”导入配置文件_pic；
类管理器\u Home扩展组件{
render（）{
返回(
约翰·史密斯

经理


你的调查
调查1
);
}
}
将默认管理器导出到主页；

我通过去掉css中的display:block解决了这个问题。我不知道为什么它会导致css文本显示出来。

我通过去掉css中的display:block解决了这个问题。我不知道为什么它会导致css文本显示出来。

您没有在John Smith之后关闭div标记。当你修复它时会发生什么？也许尝试创建react应用程序，你需要NodeJ和npm或yarn@radihuq很抱歉，我没有输入所有内容。@HMR这是使用“创建反应”应用程序，我通过他们的“开始反应”脚本运行了它，您执行了

npm start

？您没有在John Smith

之后关闭div标记。当你修复它时会发生什么？也许尝试创建react应用程序，你需要NodeJ和npm或yarn@radihuq很抱歉，我没有把所有的东西都放进去。@HMR这是使用create-react应用程序，我通过他们的start-react脚本运行了它，你做了

npm-start

？

import React, { Component } from 'react';
import '../css/style.css';
import profile_pic from '../res/img_profile_pic.png';

    class Manager_Home extends Component {
      render() {
        return (
             <div classname="Mainpage">
        <div className="sidenav">
                <img src={profile_pic} ></img>
                <p>John Smith</p>
                <p>Manager</p>
                <hr></hr>
                <a href="/home">Home</a>
                <a href="/createSurvey">Create Survey</a>
                <a href="/givenSurveys">Given Surveys</a>  
        </div>

        <div className="main">
            <h2>Your Surveys</h2>
            <p class="borders">Survey 1</p>
        </div>
    </div>
        );
      }
    }
    export default Manager_Home;