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

回答

相关问题