react條件渲染（遍歷、循環、if-else、className、onClick、html解析）

第一種方式：onClick的用法

方案一

class App extends Component {
   constructor(props) {
      super(props)
      this.state={
           initspeed:null,   //讀題速度
      }
   }
   velocityfun(velocity){//選擇速度
    this.setState({
         initspeed:velocity
    })
  }
   render() {
      return (
           <a onClick={this.velocityfun.bind(this,1)} className={this.state.initspeed === 1 ? 'sel':''}>慢</a>
      )
   }
}

本地效果為：D:\www\svn\project\react_abacus\src\components\Listenride.js

第二種方式：className用法

方案一

<a className={`symbol_btn ${this.state.initsymbol === 'yes'? 'sel' : ''}`}>讀+號</a>

 

第三種方式：if-else用法

方案一

class App extends Component {
     render() {
         return (
               <div className="game_start listen_start">
                      {
                         this.state.overType ? 
                         (
                               <a onClick={this.stopBtnClick.bind(this)} className="over_btn">停止</a>
                         ):(
                               <a className="over_hover_btn">停止</a>
                         )
                      }
             </div>
         )
     }

}

本地效果為：D:\www\svn\project\react_abacus\src\components\Listenride.js

{if...else...}五種方案說明：http://blog.csdn.net/wmzy1067111110/article/details/51538241

第四種方式：react帶標簽字符串轉義為html解析

使用 dangerouslySetInnerHTML={{ __html: htmlString}}

<p className="calculate"><span dangerouslySetInnerHTML={{__html : this.state.display.calculate}} /></p>

本地效果：D:\www\svn\project\react_abacus\src\components\Listenride.js

react中將帶標簽的字符串轉義為html解析      http://blog.csdn.net/sinat_30443713/article/details/78790036

 第五種方式：style屬性用法

{/*style屬性必須使用 {{}} */}
<div style={{width: 20px; height=30px}}>
    { props.text }
</div>

<div className="img-responsive" style={{ backgroundSize:'100%',backgroundImage:'url(../src/assets/maibei.png)' }}><img src={item.poster.thumbnail} style={{width: '100%', transition: 'all 1.2s ease', opacity: 1}} /></div>

 

用map遍歷數組寫法有：

constructor() {
    super()
    this.state = {
       val: '',
       arr: []
    }
}
{
  arr1.map((i,index) =>(
   <div onClick={this.onDelete.bind(this,index)}>{i}</div>
))
}

還有一種寫法：

constructor(props){
        super(props);
        this.state={
            datalist:[],
            playinglist:[],
            soonlist:[]
        }
    }
componentWillMount(){
   axios.get('v4/api/billboard/home').then(res=>{
            //接口錯誤排除
            if(res.data.data.billboards){
                this.setState({
                    datalist:res.data.data.billboards
                })
            }
        })
｝
{
     this.state.datalist.map((item)=>
           <div key={item.id}>
           <img src={item.imageUrl} style={{width:'100%'}} />
       </div>
     )
}

 

另外一種寫法

 var students = ["張三然","李慧思","趙思然","孫力氣","錢流量"];  
              
            ReactDOM.render(  
                <ul>  
                    {  
                        students.map(function(username){  
                            return <li>{username}</li>  
                        })  
                    }  
                </ul>,  
                document.getElementById("ulLi")  
            )  

 if判斷：

<div className="film-word2">
        <span>主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;演：</span>
        <span>{
                this.state.info.actors.map((item,index)=>
                  <span key={index}>{index==0 ? ' ' : ' | '}{item.name}</span>
                )
              }</span>
</div>

 react中多個class的props判斷處理

render(){
    var className = "";
    switch(this.props.某屬性){
        case 屬性1:
        className = "className1";
        break;
        ...
        default: 
        className = "className"; 
    }
    return (
        <div>
            <div className={"card " + className}> </div>
        </div>
    )
}

react中className用法

<span className={`icon-xuanze1 pro-select-status ${item.selectStatus? 'pro-selected': ''}`}></span>
<span className={`icon-jian ${item.selectNum > 0? 'edit-active':''}`} onClick={this.handleEdit.bind(this, index, -1)}></span>
<span className={`icon-jia`} onClick={this.handleEdit.bind(this, index, 1)}></span>