React Child Component Not Rendering

Я создаю иерархический компонент React с помощью JSX. Код не показывает никаких ошибок, но на моей странице ничего не отображается. Вот мой код ниже.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 />;

и НЕ

  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

ответ

Смежные вопросы