react Fragment

react中要有一个div包裹着jsx,react提供了Fragment包裹jsp代码就不会在页面中没有这个元素，如果用div元素包裹后会出现div

import React, {Component, Fragment} from 'react';
class TodoList extends Component {
     constructor (props)
     {
          super (props);
          this.state = {
               inputValue: 'hello',
               list: []
          }
     }

     render ()
     {
          return (<Fragment>
               <div><input
                    value={this.state.inputValue}
                    onChange={
                         e => this.handleInput (e)}
               />
                    <button onClick={
                         e => this.handleClick ()}>提交
                    </button>
               </div>
               <ul>{this.state.list.map ((item,
                                     index) => {
                         return (<li key={index}
                                     onClick={e =>this.cancel(index)}
                                     dangerouslySetInnerHTML={{__html:item}}//正常显示你的html而不是带标签的html
                         ></li>)
                    })}
               </ul>

          </Fragment>)
     }

     handleInput (e)
     {
          this.setState ({
               inputValue: e.target.value
          })
     }

     handleClick ()
     {
          let list = [];
          list.push (this.state.inputValue);
          this.setState ({
               list: [...this.state.list,this.state.inputValue],
               inputValue:''
          });
     }
     cancel(index) {
          let list = [...this.state.list];
          list.splice(index,1);
          this.setState({
               list:list
          })
     }
}

export default TodoList