ReactJS babel腳本沒有顯示內容

我目前正在試驗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>

來源

2017-03-27 Wilko van der Veen

嘗試使用大寫的名稱爲組件。 '函數文本框（道具）'和'<文本框值=「Hello World」/>，'。 –

一些事情你需要改變：

*更改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"> 
 
    \t \t <form id="mainform"> 
 
    \t \t </form> 
 
    \t </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"> 
 
\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 Components() { 
 
    \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  </script> 
 
    </body> 
 
</html>

來源

2017-03-27 12:04:00

資本化的伎倆。不必改變其他任何東西。 –

ReactJS babel腳本沒有顯示內容

回答

相關問題