猿问
下载APP

简单组件未呈现:React js

我想使用下面的代码做出反应,但我没有在浏览器中获取html元素。控制台中没有错误。


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

有人可以帮忙解决这个问题。


喵喔喔
浏览 72回答 3
3回答

慕丝7291255

如果一个React Class name以一个lowercase字母开头,那么classget中没有方法调用,即没有Renders,并且你在浏览器控制台中没有得到任何错误信息,因为小写字母被视为HTML元素,所有React components必须以upper case信,所以总是使用大写。而不是reactTest使用它:ReactTest它会工作。根据DOC:用户定义的组件必须大写。当元素类型以小写字母开头时,它引用内置组件,如<div>或,<span>并导致传递给字符串'div'或'span' React.createElement。以大写字母开头的类型,如<Foo />编译到React.createElement(Foo)并与JavaScript文件中定义或导入的组件相对应。我们建议使用大写字母命名组件。如果您确实有一个以小写字母开头的组件,请在JSX中使用它之前将其分配给大写变量。检查工作代码:<!DOCTYPE html><html>&nbsp; &nbsp; <head>&nbsp; &nbsp; &nbsp; &nbsp; <title>React without npm</title>&nbsp; &nbsp; &nbsp; &nbsp; <script src="https://unpkg.com/react@15/dist/react.js"></script>&nbsp; &nbsp; &nbsp; &nbsp; <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>&nbsp; &nbsp; &nbsp; &nbsp; <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>&nbsp; &nbsp; </head>&nbsp; &nbsp; <body>&nbsp; &nbsp; <div id="test"></div>&nbsp; &nbsp; <script type="text/babel">&nbsp; &nbsp; &nbsp; &nbsp; var ReactTest = React.createClass({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; render: function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>React Without NPM</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; ReactDOM.render(<ReactTest />,document.getElementById('test'));&nbsp; &nbsp; </script>&nbsp; &nbsp; </body></html>

慕容森

以下工作正常,尝试一下:&nbsp; &nbsp; &nbsp; var ReactTest = React.createClass({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; render: function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>React Without NPM</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; 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>

aluckdog

const Some = ()=> <div /><Some />会工作,但是const some = () => <div /><some />不行
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答