React實踐debug:JSX輸出的限制(存疑)

今天在練習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等。

相關文章
相關標籤/搜索