Question

我目前正在尝试使用ReactJS，我不确定为什么这个html页面没有显示输入控件的任何文本（并且控件宽度也为零）。

＆＃13;

<!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">
		<form id="mainform">
		</form>
	</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">
	
		function textbox(props) {
			return (<input type='text' value={props.value} class='form-control' />);			
		}
		
		function component() {
			return (<div class='component'></div>);
		}	
		
		ReactDOM.render(
			<textbox value="Hello World" />,						
			document.getElementById('mainform')
		);		
			
			
	</script>
  </body>
</html>

＆＃13;

Answer 1

您需要改变的事情很少：

*将doctype更改为DOCTYPE。

* react组件的名称应以大写开头，否则将被视为HTML元素。

*不要包含react和react-dom这样的参考：

<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>

在HTML文件中包含引用，如下所示：

<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>

或者，如果您要维护不同的文件，请将其导入文件顶部。

检查工作代码：

<!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">
    		<form id="mainform">
    		</form>
    	</div>

        <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>
        <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">
	
    		function Textbox(props) {
    			return (<input type='text' value={props.value} class='form-control' />);			
    		}
    		
    		function Components() {
    			return (<div class='component'></div>);
    		}	
    		
    		ReactDOM.render(
    			<Textbox value="Hello World" />,						
    			document.getElementById('mainform')
    		);			
	    </script>
    </body>
</html>

ReactJS babel脚本不会显示内容

1 个答案: