Javascript 反应组件不'；不显示

所有代码编译都没有错误，但我的React组件

NestedMenu

不会显示在浏览器中。但是我不信任编译器，我怀疑我遗漏了一些语法错误。我是React JS的初学者，所以可能我犯了一个语法错误或者其他一些我不容易看到的错误。可能我无法调用列表中的

React.createRef（）

。但是我需要

refs

稍后调用按钮中的函数

main.js：

import React from 'react';
import ReactDOM from 'react-dom';
import NestedMenu from './NestedMenu.jsx';

ReactDOM.render(<NestedMenu />, document.getElementById('nestedmenu'));

webpack.config.js：

    var config = {
   entry: './main.js',
   output: {
      path:'/',
      filename: 'index.js',
   },
   devServer: {
      inline: true,
      port: 8080
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}
module.exports = config;

控制台输出：

---

不确定您是否只是没有复制/粘贴它，但您没有声明

按钮列表

或

按钮列表

。您放入沙箱的代码与此处列出的代码不同

你没有在控制台中得到任何错误？目前，

按钮列表

和

按钮英语

也是全球性的。可能是导致错误的原因。因为它在这里非常有效：我只收到一些警告。等等，我会去仔细检查是否有任何严重警告。我添加了控制台的屏幕截图。当你打开index.html时，浏览器控制台中有错误吗？是的，我在Chrome控制台中得到一个错误：index.js:14 ReferenceError:buttonsArgsList没有在constructClassInstance（index.js:14）的新t（index.js:6）中定义在开始工作时（index.js:14），只需在两个变量之前添加

var

或

let

。我忘了用“var”声明列表。现在它开始工作了。谢谢

import React from 'react';

class NestedMenu extends React.Component {
    constructor(props){
        super(props);

        buttonsArgsList = [
                            { id: 0, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'Computer', tcolor:'#FFFFFF', bgcolor:'#101010', flashcolor:'#202020', bcolor:'#050505', bwidth: 3, expands:2, link:'null', ref:React.createRef()},
                             { id: 1, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'Desktop', tcolor:'#FFFFFF', bgcolor:'#151515', flashcolor:'#252525', bcolor:'#050505', bwidth: 3, expands:2, link:'null', ref:React.createRef()},
                              { id: 2, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'PC', tcolor:'#FFFFFF', bgcolor:'#202020', flashcolor:'#303030', bcolor:'#050505', bwidth: 3, expands:3, link:'null', ref:React.createRef()},
                               { id: 3, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'HP', tcolor:'#FFFFFF', bgcolor:'#252525', flashcolor:'#353535', bcolor:'#050505', bwidth: 3, expands:0, link:'null', ref:React.createRef()},
                               { id: 4, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'DELL', tcolor:'#FFFFFF', bgcolor:'#252525', flashcolor:'#353535', bcolor:'#050505', bwidth: 3, expands:0, link:'null', ref:React.createRef()},
                               { id: 5, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'ASUS', tcolor:'#FFFFFF', bgcolor:'#252525', flashcolor:'#353535', bcolor:'#050505', bwidth: 3, expands:0, link:'null', ref:React.createRef()},
                              { id: 6, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'MAC', tcolor:'#FFFFFF', bgcolor:'#202020', flashcolor:'#303030', bcolor:'#050505', bwidth: 3, expands:0, link:'null', ref:React.createRef()},
                             { id: 7, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'Laptop', tcolor:'#FFFFFF', bgcolor:'#151515', flashcolor:'#252525', bcolor:'#050505', bwidth: 3, expands:3, link:'null', ref:React.createRef()},
                              { id: 8, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'PC', tcolor:'#FFFFFF', bgcolor:'#202020', flashcolor:'#303030', bcolor:'#050505', bwidth: 3, expands:3, link:'null', ref:React.createRef()},
                               { id: 9, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'DELL', tcolor:'#FFFFFF', bgcolor:'#252525', flashcolor:'#353535', bcolor:'#050505', bwidth: 3, expands:0, link:'null', ref:React.createRef()},
                               { id: 10, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'ASUS', tcolor:'#FFFFFF', bgcolor:'#252525', flashcolor:'#353535', bcolor:'#050505', bwidth: 3, expands:0, link:'null', ref:React.createRef()},
                               { id: 11, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'HP', tcolor:'#FFFFFF', bgcolor:'#252525', flashcolor:'#353535', bcolor:'#050505', bwidth: 3, expands:0, link:'null', ref:React.createRef()},
                              { id: 12, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'MAC', tcolor:'#FFFFFF', bgcolor:'#202020', flashcolor:'#303030', bcolor:'#050505', bwidth: 3, expands:0, link:'null', ref:React.createRef()},
                              { id: 13, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'Chrome book', tcolor:'#FFFFFF', bgcolor:'#202020', flashcolor:'#303030', bcolor:'#050505', bwidth: 3, expands:0, link:'null', ref:React.createRef()}
                         ];

        buttonsList = buttonsArgsList.map((button) =>
            <li>
            <MenuButton key={button.id.toString()} 
                        ref={button.ref} 
                        width={button.width}
                        height={button.height}
                        tcolor={button.tcolor}
                        bgcolor={button.bgcolor}
                        flashcolor={button.flashcolor}
                        bcolor={button.bcolor}
                        bwidth={button.bwidth}
                        botbradius={button.botbradius}
                        topbradius={button.topbradius}
                        text={button.text}
                        expands={button.expands}
                        link={button.link}
            />
            </li>
        );
    }

   render() {
      return (
         <div>
            COME ON SHOW THIS!
         </div>
      );
   }
}

class MenuButton extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            bgcolor: this.props.bgcolor,
            relypos: 0,
            relxpos: 0,
            botbradius: this.props.botbradius,
            topbradius: this.props.topbradius
        };
    }

    render(){
        var menubuttonstyle = {
            color: this.props.tcolor,
            backgroundColor: this.state.bgcolor,
            width: this.props.width,
            height: this.props.height,
            position: 'relative',
            top: this.state.relypos,
            left: this.state.relxpos,
            borderColor: this.props.bcolor,
            borderWidth: this.props.bwidth,
            borderTopLeftRadius: this.state.topbradius,
            borderTopRightRadius: this.state.topbradius,
            borderBottomLeftRadius: this.state.botbradius,
            borderBottomRightRadius: this.state.botbradius,
            transition: 'background-color 1s ease-out, border-radius 1s ease-out, top 1s ease-out, left 1s ease-out, transform 1s ease-out'
        };

        return(
            <div style={this.menubuttonstyle}>
                {this.props.text}
            </div>
        );
    }
}


export default NestedMenu;

    {
  "name": "reactapp1",
  "version": "1.0.0",
  "description": "My first React project.",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-timeout": "^1.1.1",
    "style-it": "^2.0.0",
    "webpack": "^4.5.0"
  },
  "devDependencies": {
    "css-loader": "^0.28.11",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "^3.1.3"
  }
}

    var config = {
   entry: './main.js',
   output: {
      path:'/',
      filename: 'index.js',
   },
   devServer: {
      inline: true,
      port: 8080
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}
module.exports = config;