今天在練習React構建組件的時候遇到一個問題。html
因爲文檔中反覆提倡將組件儘量按功能單位分解複用。在練習用React作一個todolist時候,我把todolist分解成兩部分:vue
class Todolist = class Writedown + class Todo;react
其中 class Writedown返回 一個input和一個button 以接收和肯定 用戶輸入的文本。git
class Todo 是一個li,展現todo事項並帶有刪除事項的span。之因此抽取li標籤做爲Todo組件是考慮到之後擴展功能,如對單個事項添加修改文本、置頂、標記已完成等等。github
可是在寫完class Todo的時候發現檢測工具卻報錯,說Todolist的constructor構造器出現Syntax Error。數組
Are you kdding me?瀏覽器
最後發現是 class Todo 引起的問題,此次的報錯徹底不真實,並誤導了我。。反覆排查,我懷疑是render返回的JSX受到HTML類型約束.工具
在vue中,咱們的自定義組件也同樣,當DOM模板解析時,也受到HTML的限制,在table、ul等元素中限制了其包裹的html標籤:this
<table><tr is="my-row"></tr></table>spa
咱們只能在tr 中用借用is特性綁定自定義組件my-row。
我此次在子組件中返回li,React竟然報錯說我有個syntax error,並指出是unexpected token,真是一臉懵逼。。。。
----------------------------------------------------------------------------------------
可是在官網中,有個例子是function組件返回li,這讓我很疑惑。https://facebook.github.io/react/docs/lists-and-keys.html#extracting-components-with-keys.
這問題先記下,這兩天弄清楚。
----------------------9月4號晚 更新--------------------------------
而後發現。。返回li確實沒有問題。。。
這實在是最難接受的狀況了。瀏覽器再也不報錯,可是代碼結構是和原來差很少的。
1 class Write extends React.Component { 2 constructor(props){ 3 super(props); 4 this.handle=this.handle.bind(this); 5 } 6 handle(){ 7 const text=document.getElementById('todoIn').value; 8 this.props.onWriteDown(text); 9 } 10 render(){ 11 return ( 12 <div> 13 <input type="text" id="todoIn" /> 14 <button onClick={this.handle}>confirm</button> 15 </div> 16 ); 17 } 18 } 19 //Todo組件輸出li,接收delete方法 20 class Todo extends React.Component { 21 constructor(props){ 22 super(props); 23 this.handle=this.handle.bind(this); 24 } 25 handle(){ 26 } 27 render(){ 28 return ( 29 <li onClick={this.props.onDel}>{this.props.mes}</li> 30 ); 31 } 32 } 33 34 //Todolist組件,用todolist數組操做、存儲事項,交互後賦值給state,也就是說state接收的是副本。 35 class Todolist extends React.Component { 36 constructor (props) { 37 super(props); 38 this.n=0; 39 this.state={list:[]}; 40 this.todolist=[]; 41 this.handle=this.handle.bind(this); 42 this.handle_del=this.handle_del.bind(this); 43 } 44 handle (m) { 45 this.todolist.push({thing:m,vid:this.n++}); 46 this.setState({list:this.todolist}); 47 } 48 handle_del (id) { 49 let d =0; 50 this.todolist.forEach((v,i)=>{ 51 if(v.vid==id){ 52 d=i; 53 } 54 }); 55 this.todolist.splice(d,1); 56 this.setState({list:this.todolist}); 57 } 58 render(){ 59 var that = this; 60 var todo=[]; 61 this.state.list.forEach(function(v,i,a){ 62 let id = v.vid.toString(); 63 console.log(v.thing) 64 let temp=<Todo key={id} onDel={() => that.handle_del(id)} mes={v.thing} ></Todo>; 65 todo.push(temp); 66 }); 67 return( 68 <div> 69 <Write onWriteDown={this.handle} /> 70 <ul> 71 {todo} 72 </ul> 73 </div> 74 ); 75 } 76 } 77 78 ReactDOM.render( 79 <Todolist />, 80 document.getElementById('example') 81 );
不過如今能夠肯定的是,JSX的能夠輸出li、tr等。