React实践debug：JSX输出的限制（存疑）

今天在练习React构建组件的时候遇到一个问题。

由于文档中反复提倡将组件尽可能按功能单位分解复用。在练习用React做一个todolist时候，我把todolist分解成两部分：

class Todolist = class Writedown + class Todo；

其中 class Writedown返回 一个input和一个button 以接收和确定 用户输入的文本。

class Todo 是一个li，展示todo事项并带有删除事项的span。之所以抽取li标签作为Todo组件是考虑到以后扩展功能，如对单个事项添加修改文本、置顶、标记已完成等等。

但是在写完class Todo的时候发现检测工具却报错，说Todolist的constructor构造器出现Syntax Error。

Are you kdding me?

最后发现是 class Todo 引发的问题，这次的报错完全不真实，并误导了我。。反复排查，我怀疑是render返回的JSX受到HTML类型约束.

在vue中，我们的自定义组件也一样，当DOM模板解析时，也受到HTML的限制，在table、ul等元素中限制了其包裹的html标签:

<table><tr is="my-row"></tr></table>

我们只能在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确实没有问题。。。

这实在是最难接受的情况了。浏览器不再报错，但是代码结构是和原来差不多的。

   class Write extends React.Component {
     constructor(props){
       super(props);
       this.handle=this.handle.bind(this);
     }
     handle(){
       const text=document.getElementById('todoIn').value;
       this.props.onWriteDown(text);
     }
     render(){
      return (
      <div>
     <input type="text" id="todoIn" />
      <button onClick={this.handle}>confirm</button>
      </div>
      );
     }
   }
   //Todo组件输出li，接收delete方法
   class Todo extends React.Component {
     constructor(props){
       super(props);
       this.handle=this.handle.bind(this);
     }
     handle(){
     }
     render(){
      return (
      <li onClick={this.props.onDel}>{this.props.mes}</li>
      );
     }
   }

   //Todolist组件，用todolist数组操作、存储事项，交互后赋值给state，也就是说state接收的是副本。
  class Todolist extends React.Component {
      constructor (props) {
       super(props);
       this.n=0;
       this.state={list:[]};
       this.todolist=[];
       this.handle=this.handle.bind(this);
       this.handle_del=this.handle_del.bind(this);
     }
     handle (m) {
       this.todolist.push({thing:m,vid:this.n++});
       this.setState({list:this.todolist});
     }
     handle_del (id) {
        let d =0;
        this.todolist.forEach((v,i)=>{
          if(v.vid==id){
            d=i;
          }
       });
       this.todolist.splice(d,1);
        this.setState({list:this.todolist});
     }
     render(){
     var that = this;
       var todo=[];
       this.state.list.forEach(function(v,i,a){
       let id = v.vid.toString();
       console.log(v.thing)
        let temp=<Todo  key={id} onDel={() => that.handle_del(id)}  mes={v.thing} ></Todo>;
         todo.push(temp);
       });
       return(
       <div>
         <Write onWriteDown={this.handle} />
         <ul>
         {todo}
         </ul>
        </div>
       );
     }
   }

    ReactDOM.render(
       <Todolist />,
      document.getElementById('example')
    );

不过现在可以确定的是，JSX的可以输出li、tr等。