## 1.占位符 ~~~ import React,{Component,Fragment} from 'react' //直接使用就可以了 <Fragment> </Fragment> ~~~ ## 2.注释 ~~~ {/* 注释 */} ~~~ ## 3.样式 ~~~ //1.单独定义index.css文件 .input{ border:1px solid #333; } <input className="input"/> //2.在index.js组件中引入 import './index.css' ~~~ ## 4.将js中html放入jsx语法中 ~~~ import React, { Component, Fragment } from 'react'; import './index.css'; class App extends Component { constructor(props) { super(props); this.state = { list: [ "<h2>hello world</h2>", "<h3>hello world</h3>", "<h4>hello world</h4>", ] } } render() { return ( <div> <div>{this.state.list.map((item,index)=>{ return <div key={index} dangerouslySetInnerHTML={{__html:item}} ></div> })}</div> </div> ) } } export default App; ~~~ ## 5.input与label ~~~ <label htmlFor="input">输入内容</label> <input id="input"/> ~~~ ## 6.解构state ~~~ var {list} = this.state; ~~~