个人中心
gpt4 book ai didi

javascript - React 组件不显示

转载 作者：行者123 更新时间：2023-11-30 20:35:43 28 4
gpt4 key购买 nike

所有代码编译都没有错误，但我的 React Component NestedMenu 没有显示在浏览器中。不过我不信任编译器，我怀疑我遗漏了一些语法错误。我是 React JS 的初学者，所以可能我犯了语法错误或其他一些我不容易发现的错误。也许我无法在列表中调用 React.createRef()。但是稍后我需要 refs 来调用按钮中的函数。

主要.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>

嵌套菜单.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;

控制台输出: enter image description here

最佳答案

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

关于javascript - React 组件不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49867967/

28 4 0
文章推荐： javascript - 如何从字符串中取出一个子字符串并将另一个字符串附加到该字符串并将其转换为数组
文章推荐： c - C语言中char arr[] = "OX|-"如何工作
文章推荐： c# - 使 AcceptButton 边框不可见
文章推荐： c - 获取接收到的数据包的实际大小
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com