Простой компонент не рендеринг: React js

Я пытаюсь отреагировать, используя приведенный ниже код, но я не получаю html элемент в браузере. В консоли нет ошибок.Простой компонент не рендеринг: React js

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>React without npm</title> 
     <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
     <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script> 
    </head> 
    <body> 
    <div id="test"></div> 
    <script type="text/babel"> 

     var reactTest = React.createClass({ 
      render: function(){ 
       return(
        <h1>React Without NPM</h1> 
       ); 
      } 
     }); 

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

Может кто-то пожалуйста, помогите в этом.

источник

2017-02-08 suyesh

Если Реагировать Class name начинается с lowercase письма, то нет методов внутри class не дозвонились, то есть ничто не оказывает, и вы не получите никаких сообщений об ошибках в консоли браузера, потому что маленькие буквы рассматриваются как HTML элементы, это правило, что все React components должно начинаться с буквы upper case, поэтому всегда используйте верхний регистр.

Вместо reactTest используйте это: ReactTest он будет работать.

По DOC:

Определенные пользователем компоненты должны быть капитализированы.

Когда тип элемента начинается со строчной буквы, это относится к встроенного компонента, как <div> или <span> и результатов в строке «ДИВ» или «пролет» передается React.createElement. Типы, которые начинаются с прописной буквы , например <Foo />, составляют React.createElement(Foo) и , соответствуют компоненту, определенному или импортированному в ваш файл JavaScript.

Мы рекомендуем назвать компоненты с большой буквы. Если у вас есть компонент , который начинается с буквы в нижнем регистре, назначьте его переменной , прежде чем использовать ее в JSX.

Проверьте рабочий код:

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>React without npm</title> 
 
     <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
 
     <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script> 
 
    </head> 
 
    <body> 
 
    <div id="test"></div> 
 
    <script type="text/babel"> 
 

 
     var ReactTest = React.createClass({ 
 
      render: function(){ 
 
       return(
 
        <h1>React Without NPM</h1> 
 
       ); 
 
      } 
 
     }); 
 

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

источник

2017-02-08 10:10:36

Следующая отлично работает, попробуйте:

 var ReactTest = React.createClass({ 
 
      render: function(){ 
 
       return(
 
        <h1>React Without NPM</h1> 
 
       ); 
 
      } 
 
     }); 
 

 
     ReactDOM.render(<ReactTest />,document.getElementById('test'));

<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> 
 

 
<div id="test" ></div>

источник

2017-02-08 10:12:36

Простой компонент не рендеринг: React js

ответ

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