一、input类似于vue中v-model

  1. //value是可变的，input要加上onChange事件
  2.  <input type="text" value={this.state.userName} onChange={this.handleChange}/>
  4.  this.state={userName}
  6. handleChange=(e)=>{
  7.     this.setState({
  8.       userName:e.target.value
  9.     })
  10.   }

例如

  1.  <td><InputNumber min={1}  defaultValue={item.productCount}
  2.       onChange={this.ChangeNum.bind(this,item)} /></td>
  1.  ChangeNum=(item,value)=>{
  2.     var id=item.id;
  3.     var data=this.state.data;
  4.     data.forEach(item=>{
  5.       if(item.id==id){
  6.         item.productCount=value
  7.       }
  8.     })
  9.     this.setState({
  10.       data
  11.     })
  12.   }

二、三元表达式

  1. this.state={
  2.       isShow:true
  3.     }
  5. render() {
  6.     return(
  7.       <div>
  8.         <p>{this.state.isShow?'good':'hello world'}</p>
  9.       </div>     
  10.     )
  11.   }

三、Class，Style

  1. className:
  2. className={`list ${!item.isSelected?'':'hidden'}`}
  1. style={{display: (item.isSelected) ? "" : "none"}}

四、if-else

  1. render() {
  2.     return(
  3.       <div>
  4.         {this.Message()}
  5.       </div>     
  6.     )
  7.   }
  8.   Message(){
  9.     if(this.state.isShow){
  10.       return (<span>显示</span>)
  11.     }else{
  12.       return (<span>隐藏</span>)
  13.     }
  14.   }

五、获取Dom

  1. <button ref={(btn)=>{this.btn=btn}}>ref</button>
  2.    componentDidMount(){
  3.         console.log(this.btn)     //<button>ref</button>
  4.     }

六、导入本地图片

  1.  <img src={'../assets/banner_1.jpg'} alt=""/>
  1. <img src={require('./assets/01.jpg')}></img>

七、遍历对象

遍历cities对象

  1. http://yapi.demo.qunar.com/mock/43104/film

组件中

  1. class City extends Component {
  2.     constructor(props){
  3.         super(props);
  4.         this.state={
  5.             cities:"",
  6.         }
  7.     }
  9. <div className="cities">
  10.      {Object.keys(this.state.cities).map((obj,value)=>{
  11.         return (<div key={value}>{obj} 
  12.             {this.state.cities[obj].map((item,index)=>{
  13.                 return (<p onClick={this.handleCity.bind(this,item.name)} 
  14.                 key={index}>{item.name}</p>)
  15.                     })}
  16.                         </div>)
  17.                     })}
  18.                 </div>

八、严格模式

React.StrictMode 是一个有用的组件，用于突出显示应用程序中的潜在问题。就像 <Fragment>，<StrictMode> 一样，它们不会渲染任何额外的 DOM 元素。它为其后代激活额外的检查和警告。这些检查仅适用于开发模式。

  1. import React from 'react'
  3. function ExampleApplication() {
  4.   return (
  5.     <div>
  6.       <Header />
  7.       <React.StrictMode>
  8.         <div>
  9.           <ComponentOne />
  10.           <ComponentTwo />
  11.         </div>
  12.       </React.StrictMode>
  13.       <Footer />
  14.     </div>
  15.   )
  16. }

在上面的示例中，strict mode 检查仅应用于 <ComponentOne> 和 <ComponentTwo> 组件。