IT技术 - 在 React Js 上需要帮助 - 吾爱随笔录

在 React Js 上需要帮助

IT技术 javascript html reactjs dom jsx

2021-04-25 06:34:39

我是 React Js 的新手，我的代码不起作用。请看下面：

这是我的脚本文件Main.jsx。该文件由 react 编译，输出放在“dist”文件夹下的 main.js 文件中。

var react = require("react"),
reactDom = require("react-dom");
var myComponent = react.createClass({
    render: function () {
        return <div><h4>I am rendered by react.</h4></div>;
    }
});

reactDom.render(<myComponent />, document.getElementById("basicDiv"));

它是Index.html

<html>    
<head>
    <base href="./" />
    <title>App title</title>    
    <script src="node_modules/react/dist/react.js"></script>
    <script src="node_modules/react/dist/react-with-addons.js"></script>
    <script src="node_modules/react-dom/dist/react-dom.js"></script>
</head>

<body>
    <div id="basicDiv"></div>

    <!-- React compiled code is in dist folder and is accessible -->
    <script src="dist/main.js"></script>
</body>

</html>

当我在浏览器中运行 index.html 文件时，输出是空白屏幕。请参阅以下 chrome 开发工具检查器窗口的屏幕截图：

'myComponent' 的内容不在浏览器中呈现。我看过许多具有相同代码的教程，但它不起作用......不知道为什么。

请对此提供帮助，如果可能，请为我提供一些最新版本的示例代码/教程。提前致谢

更新

请注意，我在我的 HTML 文件中包含了 React 库引用，这使我可以在我的脚本文件中导入 React 时自由地使用“React”或“react”作为变量名。在这种情况下，将“React”（大写 R）作为变量名不是强制性的。

最终更新

因此，解决方案（如 Damien Leroux 所回答）是使 react 组件变量名以大写字母开头。'var myComponent' 必须是 'var MyComponent' 或 'var Mycomponent'。

3个回答

react类必须始终以大写字母开头：

var MyComponent = react.createClass({

读取用户定义的组件必须大写

不仅您的 React 组件必须以大写字母开头，请参阅：

React - 在 AJAX 之后添加组件以查看

但你也必须导入像

var React = require("react"),
ReactDom = require("react-dom");

即大写字母，因为内部 JSX 被转换为 React.createElement()在这种情况下，它会说 react 未定义。

你的代码必须看起来像

var React = require("react"),
ReactDom = require("react-dom");
var MyComponent = React.createClass({
    render: function () {
        return <div><h4>I am rendered by react.</h4></div>;
    }
});

ReactDom.render(<MyComponent />, document.getElementById("basicDiv"));

import React from 'react'
import './Aboutus.css'
import Header from '../Home/Header/Header.jsx'
import Footer from '../Home/Footer/Footer.jsx'

var stylesheader = {
  paddingTop: 50, 
  textAlign:'center', 
  color: '#204871'
};

var stylehead = {
  paddingLeft: 200,
  paddingRight:200, 
  paddingTop:20, 
  color: '#204871'
};

var styles = {
  paddingTop: 120, paddingLeft:20,
  color: '#128bea', 
  fontSize: 26
};

var style1 = {
  paddingTop:100,
  color: '#204871' 
};

class Aboutus extends React.Component {

    render() {

  var title = "we are a team";

  var leadership = [
  {
    "name":"abc",
    "department":"abc",
    "phone":"abc",
    "email":"abc"
  },
  {
     "name":"abc",
    "department":"abc",
    "phone":"abc",
    "email":"abc"
  }
  ];

  var business = [
  {
     "name":"abc",
    "department":"abc",
    "email":"abc"
  },
  {
       "name":"abc",
    "department":"abc",
    "email":"abc"
  },
  ];

  var algorithm = [
  {
       "name":"abc",
    "department":"abc",
    "email":"abc"
  },
  {
       "name":"abc",
    "department":"abc",
    "email":"abc"
  },
  {
      "name":"abc",
    "department":"abc",
    "email":"abc"
  },
  {
       "name":"abc",
    "department":"abc",
    "email":"abc"
  }
  ];

   var developer = [
  {
      "name":"abc",
    "department":"abc",
    "email":"abc"
  },
  {
       "name":"abc",
    "department":"abc",
    "email":"abc"
  },
  {
      "name":"abc",
    "department":"abc",
    "email":"abc"
  }
  ];

     var row1=leadership.map(row => {
                              return <div className="column">
                                       <div className="card"> 
                                          <div className="container">
                                              <h2>{row.name}</h2>
                                              <p>{row.department}</p>
                                              <p>{row.phone}</p>
                                              <p>{row.email}</p>
                                          </div>
                                        </div>
                                      </div> 
                              });

      var row2=business.map(row => {
                              return <div className="column">
                                       <div className="card"> 
                                          <div className="container">
                                              <h2>{row.name}</h2>
                                              <p>{row.department}</p>
                                              <p>{row.email}</p>
                                          </div>
                                        </div>
                                      </div> 
                              });

       var row3=algorithm.map(row => {
                              return <div className="column">
                                       <div className="card"> 
                                          <div className="container">
                                              <h2>{row.name}</h2>
                                              <p>{row.department}</p>
                                              <p>{row.email}</p>
                                          </div>
                                        </div>
                                      </div> 
                              });

       var row4=developer.map(row => {
                              return <div className="column">
                                       <div className="card"> 
                                          <div className="container">
                                              <h2>{row.name}</h2>
                                              <p>{row.department}</p>
                                              <p>{row.email}</p>
                                          </div>
                                        </div>
                                      </div> 
                              });

      return (

         <div className="home-component">

                <div className="home-header">
                <Header/>
                </div>

                <div className="home-content" >
                            <h1 style={stylesheader}> Meet the team </h1>
                            <h2 style={stylehead}>{title}</h2>

                            <h2 style={styles}> Leadership </h2>
                            <div className="row" style={style1}>
                              {row1}
                            </div>

                            <h2 style={styles}> Business Development </h2>
                            <div className="row" style={style1}>                    
                             {row2}                           
                            </div>

                            <h2 style={styles}> Algorithm Development </h2>
                            <div className="row" style={style1} >                    
                             {row3}                         
                            </div>

                            <h2 style={styles}>Software Development </h2>
                             <div className="row" style={style1} >                    
                              {row4}
                             </div>  
                </div>

                <Footer/>

         </div>
    );

    }
}

export default Aboutus;

其它你可能感兴趣的问题

上一篇如何修复超出最大调用堆栈大小下一篇这个角度有什么问题？