react寫法

我想知道這段react代碼有沒有什么簡略寫法，初寫react，不是很懂，望各位大神幫忙忙。

class Paging extends Component {

  constructor(props){
    super(props)
    this.state={
      visibleA:true,
      visibleB:false,
      visibleC:false,
      visibleD:false,
      visibleE:false,
      visibleF:false,
      visibleG:false,
    }
  }

  change=(value)=>{
    if(value===1){
      this.setState({
        visibleA:true,
        visibleB:false,
        visibleC:false,
        visibleD:false,
        visibleE:false,
        visibleF:false,
        visibleG:false,
      })
    }else if(value === 2){
      this.setState({
        visibleB:true,
        visibleA:false,
        visibleC:false,
        visibleD:false,
        visibleE:false,
        visibleF:false,
        visibleG:false,
      })
    }else if(value === 3){
      this.setState({
        visibleC:true,
        visibleA:false,
        visibleB:false,
        visibleD:false,
        visibleE:false,
        visibleF:false,
        visibleG:false,
      })
    }else if(value === 4){
      this.setState({
        visibleD:true,
        visibleA:false,
        visibleB:false,
        visibleC:false,
        visibleE:false,
        visibleF:false,
        visibleG:false,
      })
    }else if(value === 5){
      this.setState({
        visibleE:true,
        visibleA:false,
        visibleB:false,
        visibleC:false,
        visibleD:false,
        visibleF:false,
        visibleG:false,
      })
    }else if(value === 6){
      this.setState({
        visibleF:true,
        visibleA:false,
        visibleB:false,
        visibleC:false,
        visibleD:false,
        visibleE:false,
        visibleG:false,
      })
    }else if(value === 7){
      this.setState({
        visibleG:true,
        visibleA:false,
        visibleB:false,
        visibleC:false,
        visibleD:false,
        visibleE:false,
        visibleF:false,
      })
    }

  }

  render() {
    return (
      <div id="paging">
          <ul>
              <li><span className={this.state.visibleA === true ? 'paging_touch':null} onClick={()=>this.change(1)}>概覽</span></li>
              <li><span className={this.state.visibleB === true ? 'paging_touch':null} onClick={()=>this.change(2)}>損益</span></li>
              <li><span className={this.state.visibleC === true ? 'paging_touch':null} onClick={()=>this.change(3)}>規(guī)模</span></li>
              <li><span className={this.state.visibleD === true ? 'paging_touch':null} onClick={()=>this.change(4)}>風(fēng)險</span></li>
              <li><span className={this.state.visibleE === true ? 'paging_touch':null} onClick={()=>this.change(5)}>客戶</span></li>
              <li><span className={this.state.visibleF === true ? 'paging_touch':null} onClick={()=>this.change(6)}>業(yè)務(wù)</span></li>
              <li><span className={this.state.visibleG === true ? 'paging_touch':null} onClick={()=>this.change(7)}>團(tuán)隊(duì)</span></li>
          </ul>
      </div>
    );
  }
}
  
  export default Paging;

我想知道這段react代碼有沒有什么簡略寫法，初寫react，不是很懂，望各位大神幫忙忙。

回答

編輯回答

萌面人

主要思路如下：
1change函數(shù)中的value采用id代替，減少映射
2.同樣的解構(gòu)采用循環(huán)，map 方法

解決方案參考如下

class Paging extends Component {

    constructor(props) {
        super(props)
        this.state = {
            visibleIndex: 'A',
        }
    }

    change = (value) => {
        this.setState({
            visibleIndex: value,
        })

    }

    render() {
        let visibleList = [
            { name: 概覽, id: 'A' },
            { name: 損益, id: 'B' },
            { name: 規(guī)模, id: 'C' },
            { name: 風(fēng)險, id: 'D' },
            { name: 風(fēng)險2, id: 'E' },
            { name: 風(fēng)險3, id: 'F' },
        ]
        return (
            <div id="paging">
                <ul>
                    {visibleList.map((item, key) =>
                        <li key={key}><span className={this.state.visibleIndex === item.id ? 'paging_touch' : null} onClick={() => this.change(item.id)}>{item.name}</span></li>)
                    }
                </ul>
            </div>
        );
    }
}

答題不易，請樓主采納

2018年2月18日 14:37

編輯回答

嫑吢丕

首先, 這和 react 無關(guān).

this.state= { 
    'visible': 'A';
}

change = (value) => {
  this.setState({ 'visible': value });
}

<li><span className={this.state.visible === 'A' ? 'paging_touch':null} onClick={()=>this.change('A')}>概覽</span></li>

2018年9月15日 22:49

編輯回答

尋仙

 constructor(props){
    super(props)
    this.state={
      index:1,
    }
    change(value)==>{
      this.setState({
      index:value
      })
    }
   
//
    <li><span className={this.state.visibleA === true ? 'paging_touch':null} onClick={()=>this.change(1)}>概覽</span></li>
    //改成
    <li><span className={this.state.index=== 1 ? 'paging_touch':null} onClick={()=>this.change(1)}>概覽</span></li>
     ..........

2017年7月16日 22:05