Simple Component is not rendering: React js

2019-01-02 16:20发布

站内文章 / JavaScript
19 0 0

问题:

I am tring to do react using below code but I am not getting html element in the browser. There is no error in the console.

<!DOCTYPE html>
    <html>
    <head>
        <title>React without npm</title>
        <script src="https://unpkg.com/react@15/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@15/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>

Can someone please help on this.

回答1:

If a React Class name starts with a lowercase letter then no methods inside the class get called, i.e. nothing Renders, and you don't get any error message in the Browser console, because small letters are treated as HTML elements, its a rule that all React components must start with a upper case letter, so always use Upper Case.

Instead of reactTest use this: ReactTest it will work.

As per DOC:

User-Defined Components Must Be Capitalized.

When an element type starts with a lowercase letter, it refers to a built-in component like <div> or <span> and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like <Foo /> compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.

Check the working code:

<!DOCTYPE html>
<html>
    <head>
        <title>React without npm</title>
        <script src="https://unpkg.com/react@15/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@15/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>



回答2:

The following works fine, try it :

      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>



标签：
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~