简单组件未呈现：React js
[英]Simple Component is not rendering: 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>
有人可以帮忙吗？
3 个解决方案
解决方案1
10 2017-02-08 10:10:36
如果React Class name以lowercase字母开头，则class内的任何方法都不会被调用，即没有渲染，并且在浏览器控制台中也不会收到任何错误消息，因为小写字母被视为HTML元素，因此这是一个规则所有React components必须以upper case字母开头，因此请始终使用大写字母。
取而代之的reactTest使用： ReactTest它会工作。
根据DOC ：
用户定义的组件必须大写。
当元素类型以小写字母开头时，它引用诸如
<div>或<span>类的内置组件，并导致将字符串'div'或'span'传递给React.createElement。 以大写字母开头的类型（例如<Foo />编译为React.createElement(Foo)并与在JavaScript文件中定义或导入的组件相对应。我们建议使用大写字母命名组件。 如果您确实有一个以小写字母开头的组件，请在JSX中使用它之前将其分配给大写的变量。
检查工作代码：
<!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
以下工作正常，请尝试：
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 />
会工作，但是
const some = () => <div />
<some />
不会工作
组件未在简单的React.js应用中呈现
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.