0
我目前正在试验ReactJS,我不确定为什么这个html页面没有显示输入控件的任何文本(并且控件宽度为零)。ReactJS babel脚本没有显示内容
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Textbox example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link rel="stylesheet" href="css/example.css" type="text/css" />
</head>
<body>
<div id="content">
\t \t <form id="mainform">
\t \t </form>
\t </div>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<script src="http://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/babel">
\t
\t \t function textbox(props) {
\t \t \t return (<input type='text' value={props.value} class='form-control' />); \t \t \t
\t \t }
\t \t
\t \t function component() {
\t \t \t return (<div class='component'></div>);
\t \t } \t
\t \t
\t \t ReactDOM.render(
\t \t \t <textbox value="Hello World" />, \t \t \t \t \t \t
\t \t \t document.getElementById('mainform')
\t \t); \t \t
\t \t \t
\t \t \t
\t </script>
</body>
</html>
尝试使用大写的名称为组件。 '函数文本框(道具)'和'<文本框值=“Hello World”/>,'。 –