简单组件未呈现：React js
[英]Simple Component is not rendering: React js
问题描述
I am tring to do react using below code but I am not getting html element in the browser.
我正在尝试使用以下代码进行响应，但在浏览器中未获取html元素。 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. 有人可以帮忙吗？
3 个解决方案
解决方案1
10 2017-02-08 10:10:36
If a React Class name starts with a lowercase letter then no methods inside the class get called, ie 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. 如果React Class name以lowercase字母开头，则class内的任何方法都不会被调用，即没有渲染，并且在浏览器控制台中也不会收到任何错误消息，因为小写字母被视为HTML元素，因此这是一个规则所有React components必须以upper case字母开头，因此请始终使用大写字母。
Instead of reactTest use this: ReactTest it will work. 取而代之的reactTest使用： ReactTest它会工作。
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 toReact.createElement.<div>或<span>类的内置组件，并导致将字符串'div'或'span'传递给React.createElement。 Types that start with a capital letter like<Foo />compile toReact.createElement(Foo)and correspond to a component defined or imported in your JavaScript file.<Foo />编译为React.createElement(Foo)并与在JavaScript文件中定义或导入的组件相对应。We recommend naming components with a capital letter.
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
2 2017-02-08 10:12:36
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>
解决方案3
0 2019-02-12 17:58:00
const Some = ()=> <div />
<Some />
will work, but 会工作，但是
const some = () => <div />
<some />
won't work 不会工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.