简单组件未呈现：React js
Posted
技术标签:
【中文标题】简单组件未呈现：React js【英文标题】：Simple Component is not rendering: React js 【发布时间】：2017-06-25 21:29:02 【问题描述】：我想用下面的代码做出反应，但我没有得到 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>
有人可以帮忙吗？
【问题讨论】：
【参考方案1】：如果 React Class name 以 lowercase 字母开头，则 class 内的任何方法都不会被调用，即没有任何渲染，并且您不会在浏览器控制台中收到任何错误消息，
由于小写字母被视为HTML 元素，因此所有React components 必须以upper case 字母开头，因此请始终使用大写。
代替reactTest 使用这个：ReactTest 它会起作用。
根据DOC：
用户定义的组件必须大写。
当一个元素类型以小写字母开头时，它指的是一个 内置组件，如
<div>或<span>并生成字符串 'div' 或“跨度”传递给React.createElement。以 a 开头的类型 像<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】：下面的效果很好，试试吧：
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】：const Some = ()=> <div />
<Some />
会工作， 但是
const some = () => <div />
<some />
不会工作
【讨论】：
以上是关于简单组件未呈现：React js的主要内容，如果未能解决你的问题，请参考以下文章