Question

我是React Js的新手，我的代码无效。请看下面的内容：

这是我的脚本文件 Main.jsx 。这个文件由react编译，输出放在＆＃39; dist＆＃39;下的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 dev工具检查器窗口的以下屏幕截图：

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

请帮忙解决这个问题，如果可能的话，还提供一些最新版本的示例代码/教程。提前致谢

更新

请注意，我在我的HTML文件中包含了React库引用，这使我可以自由使用＆＃34; React＆＃34;或＆＃34;反应＆＃34;在我的脚本文件中导入React时作为变量名称。采取＆＃34;反应＆＃34;在这种情况下，（使用大写R）作为变量名称不是强制性的。

最终更新

因此解决方案（由Damien Leroux回答）是使反应组件变量名以大写字母开头。＆＃39; var myComponent＆＃39;必须是＆＃39; var MyComponent＆＃39;或者＆＃39; var Mycomponent＆＃39;。

Answer 1

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

var MyComponent = react.createClass({

阅读user-defined-components-must-be-capitalized

Answer 2

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

React - Adding component after AJAX to view

但您还必须像

那样进行反应

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

即UpperCase Letters，因为内部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"));

Answer 3

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;

需要帮助React Js

3 个答案: