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