React Child Component Not Rendering

我正在使用JSX創建分層React組件。該代碼不顯示任何錯誤，但沒有顯示在我的頁面上。以下是我的代碼如下。React Child Component Not Rendering

<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
    <title>React Test</title> 
</head> 
<body> 
    <div id="app"> 

    </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-core/5.8.34/browser.min.js"></script> 
    <script type="text/babel"> 
     var Converter = React.createClass({ 
      render: function() { 
       return <inputBox />; 
      } 
     }); 

     var inputBox = React.createClass({ 
      render: function() { 
       return <h1>Hello World!</h1>; 
      } 
     }); 

     ReactDOM.render(
      React.createElement(Converter, null), 
      document.getElementById('app'), 
     ); 
    </script> 
</body> 
</html>

當我使用

ReactDOM.render(
    React.createElement(inputBox, null), 
    document.getElementById('app') 
);

的Hello World！出現。我究竟做錯了什麼？我已經嘗試過很多調試，但無法弄清楚任何事情。

來源

2017-02-22 S. A. Malik

  return <InputBox />;

和NOT

  return <inputBox />;

當您啓動反應組件，請勿使用小寫。否則，它將被視爲簡單的HTML標籤。

來源

2017-02-22 18:33:03

你是真棒。我花了最後5個小時來調試，並且無法弄清楚這件事。組件應始終以駱駝爲首。你搖滾男人！ –

歡迎你。 –

代替

var inputBox = React.createClass({

使用此：

var InputBox = React.createClass({

由於反應組分必須以大寫否則會被當作html元素開始。

檢查工作片段：

<html lang="en"> 
 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
 
    <title>React Test</title> 
 
</head> 
 
<body> 
 
    <div id="app"> 
 

 
    </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-core/5.8.34/browser.min.js"></script> 
 
    <script type="text/babel"> 
 
     var Converter = React.createClass({ 
 
      render: function() { 
 
       return <InputBox />; 
 
      } 
 
     }); 
 

 
     var InputBox = React.createClass({ 
 
      render: function() { 
 
       return <h1>Hello World!</h1>; 
 
      } 
 
     }); 
 

 
     ReactDOM.render(
 
      <Converter/>, 
 
      document.getElementById('app'), 
 
     ); 
 
    </script> 
 
</body> 
 
</html>

來源

2017-02-22 18:33:40

React Child Component Not Rendering

回答

相關問題