简单组件未呈现：React js [英] Simple Component is not rendering: React js
问题描述
我想使用下面的代码做出反应，但我没有在浏览器中获得html
元素。控制台中没有错误。
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.
推荐答案
如果React 类名以小写字母开头，那么没有方法在类内部调用，即没有渲染，并且您在浏览器控制台中没有收到任何错误消息，
因为小写字母被视为 HTML 元素，其规则是所有 React组件必须以大写 letter，所以总是使用大写。
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.
而不是 reactTest 使用： ReactTest 它会起作用。
Instead of reactTest use this: ReactTest it will work.
根据 DOC ：
As per DOC:
用户定义的组件必须大写。
当元素类型以小写字母开头时，它参考rs到
内置组件，例如< div>或< span>并导致字符串'div'
或'span'传递给React.createElement。以
大写字母开头的类型，如< Foo />编译为React.createElement（Foo）和
对应于JavaScript文件中定义或导入的组件。
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. 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.
我们建议使用大写字母命名组件。如果你有一个以小写字母开头的
组件，请在JSX中使用之前将其分配给
大写变量。
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.
检查工作代码：
<!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>
这篇关于简单组件未呈现：React js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
