Question

我正在使用reactJS创建一组按钮。但是，我无法查看输出（屏幕上什么都没有）。我已经正确创建了一个react类并使用babel渲染了HTML。这是代码。请找出问题所在，为什么屏幕上什么都没打印。

我已导入所需文件的CDN。

react-min.js
react-dom.min.js
browser.min.js
babel.js

`` 主要

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel = "stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />


<script src="browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<style>

    #side{
        position: fixed;
        width:10%;
        height:100%;
        background-color: black;
        border:2px solid black;
        color:white;
        z-index: -1;
    }
    #buttons{
        position: fixed;
        top:10%;
        left:2%;
        color:white;
    }

</style>

<div id="side"></div>

<div id="buttons"></div>



<script type = "text/babel">

    var side = React.createClass({
        render:function(){
            return
            (
                <div>
                    <div id="Profile">
                        <button class="btn btn-danger">Profile</button>
                    </div>
                    <div id="Maps">
                        <button class="btn btn-primary">Maps</button>
                    </div>
                    <div id="video">
                        <button class="btn btn-danger">Video</button>
                    </div>
                </div>

            );
    }

});

ReactDOM.render(
    <side />,
    document.getElementById('buttons'));

</script>

Answer 1

反应组件名称应以大写字母开头。

更改

var side = React.createClass({
  ...
});

ReactDOM.render(
  <side />,
  document.getElementById('buttons')
);

收件人

var Side = React.createClass({
  ...
});

ReactDOM.render(
  <Side />,
  document.getElementById('buttons')
);

有关更多信息，请参考official docs - components must be capitalized。

为清楚起见添加可执行代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />


<script src="browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<style>
  #side {
    position: fixed;
    width: 10%;
    height: 100%;
    background-color: black;
    border: 2px solid black;
    color: white;
    z-index: -1;
  }
  
  #buttons {
    position: fixed;
    top: 10%;
    left: 2%;
    color: white;
  }
</style>
<div id="side"></div>

<div id="buttons"></div>



<script type="text/babel">

  var Side = React.createClass({ render:function(){ return (
  <div>
    <div>Hello World</div>
    <div id="Profile">
      <button class="btn btn-danger">Profile</button>
    </div>
    <div id="Maps">
      <button class="btn btn-primary">Maps</button>
    </div>
    <div id="video">
      <button class="btn btn-danger">Video</button>
    </div>
  </div>

  ); } }); ReactDOM.render(
  <Side />, document.getElementById('buttons'));

</script>

无法在React Js中查看输出？

1 个答案: