The above error occurred in the ＜div＞ component 和 Uncaught Error: The `style` prop expects a mapping_the above error occurred in the <div> component:-CSDN博客

在React应用中遇到两个错误：'The above error occurred in the ＜div＞ component'和'Uncaught Error: The `style` prop expects a mapping'。问题根源在于jsx中使用了双引号来定义样式，解决方法是将双引号替换为{{}}模板语法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React, { Component } from 'react';
//  引入 Echarts 主模块
import echarts from 'echarts/lib/echarts';
//  引入柱状图
import 'echarts/lib/chart/bar';
//  引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

class index extends Component {

    componentDidMount() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        }
        // 绘制图标，使用刚指定的配置项和数据显示图表。
        // myChart.setOption(option);
    }

    render() {
        return (
            <div>
                <div id="main" style="width: 600px;height:400px;"> </div>
            </div>
        )
    }
}

export default index;

两个报错：

The above error occurred in the <div> component

Uncaught Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

是因为jsx中不能使用双引号写样式，换成{{}}就好了。

<div id="main" style={{width: '600px',height:'400px'}}> </div>