Question

我是第一步做出反应并面对问题的新人。请帮我。下面是我的代码.. 我在“custom.jsx”文件中编写了相同的代码，但问题是相同的（没有输出）

<!DOCTYPE html>
    <html lang="en">
       <head>
          <title>react demo</title>                 
      <link rel="stylesheet" type="text/css" href="common/css/bootstrap.min.css" />
           <link rel="stylesheet" type="text/css" href="common/css/style.css" />
   </head>
   <body>


      <div id="root"></div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
           <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>  
            <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>  
            <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom-server.js"></script>  
      <script type="text/javascript" src="common/js/bootstrap.min.js"></script>
         <script src="common/js/custom.jsx"></script>
         <script type="text/jsx"> 

      var button = React.createClass({
          render: function(){
              return (
                  <button>go</button>
              )
          }
      });

      React.render(<button />,document.getElementById("root"));

      </script>
   </body>
</html>

Answer 1

更改它将起作用的变量的名称。

原因：以小写字母开头的名称被视为HTML elements，这就是为什么所有React组件必须以大写字母开头的原因，请检查此项：

＆＃13;

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>react demo</title>                 
        <link rel="stylesheet" type="text/css" href="common/css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="common/css/style.css" />
    </head>
    <body>

      <div id="root"></div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>  
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>   
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>

        <script type="text/jsx"> 

            var Button = React.createClass({
                render: function(){
                    return (
                       <button>go</button>
                    )
                }
            });

            ReactDOM.render(<Button/> ,document.getElementById("root"));

        </script>
    </body>
</html>

＆＃13;

开始使用reactjs组件是行不通的

1 个答案: