Question

所有代码编译都没有错误，但我的React Component 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'));

的index.html：

<!DOCTYPE html>
<html lang = "en">

   <head>
      <meta charset = "UTF-8">
      <title>Nested Menu</title>
   </head>

   <body>
      <div id = "nestedmenu"></div>
      <script src = "index.js"></script>
   </body>

</html>

NestedMenu.jsx：

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;

的package.json：

    {
  "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"
  }
}

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;

控制台输出：

Answer 1

不确定您是否只是没有复制/粘贴它，但您没有声明buttonsArgsList或buttonsList。您放入沙箱的代码与此处列出的代码不同。

React Component没有显示

1 个答案: