JSX中的class陷阱以及html解析问题

1、使用class样式显示或者不显示，但是浏览器控制台会发现Warning警告:

index.js:1437 Warning: Invalid DOM property `class`. Did you mean `className`?
    in input (at Xiaojiejie.js:19)
    in div (at Xiaojiejie.js:18)
    in Xiaojiejie (at src/index.js:5)

把class换成className，防止与js中的class类名冲突

2、如果想在文本框里输入一个<h1> 标签，并进行渲染。默认是不会生效的，只会把 <h1>标签打印到页面上，这并不是我想要的。如果工作中有这种需求，可以使用dangerouslySetInnerHTML属性解决。具体代码如下：

import React, { Component } from 'react';
import style from './style.css';
class Service extends Component {
  render() {
    return (
      
      <div>
        <div>
        <label html="zlk">加入服务：</label>
          <input className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)}/>
          <button onClick={this.addList.bind(this)}>增加菜单</button>
          {/* dangerouslySetInnerHTML渲染原生html */}
          <p dangerouslySetInnerHTML={{__html:this.state.text}}></p>
        </div>

        <ul>
          {
            
            this.state.list.map((item,index) =>{
              return  <li key={index+item}
                          onClick={this.dellistItem.bind(this,index)}
                          
                          >
                          {item}
                      </li>
             
            })
          }
        </ul>
      </div>
    )
  }
    
  
  inputChange(e){
    e.persist();
   console.log(e.target.value);
   this.setState({
     inputValue:e.target.value
   })
    
  }

  addList(){
    //...就是把数组进行分组，然后进行重新组合
    this.setState({
      list:[...this.state.list, this.state.inputValue]
    })
  }

  dellistItem(index){
    console.log(index);
    let list = this.state.list.splice(index,1);
    //react禁止直接setState里面操作state
    this.setState({
      list:list
    })
  }

  constructor(props) {
    super(props);//调用父类的函数，固定写法
    this.state={
      inputValue:'',
      list:["买东西","去吃饭"],
      text:"<h1>哈哈哈</h1>"
    };
  }


}

export default Service;