react写法

Question

我想知道这段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)}>规模</span></li>
              <li><span className={this.state.visibleD === true ? 'paging_touch':null} onClick={()=>this.change(4)}>风险</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)}>业务</span></li>
              <li><span className={this.state.visibleG === true ? 'paging_touch':null} onClick={()=>this.change(7)}>团队</span></li>
          </ul>
      </div>
    );
  }
}
  
  export default Paging;

我想知道这段react代码有没有什么简略写法，初写react，不是很懂，望各位大神帮忙忙。

Answer 1

主要思路如下：
1change函数中 的value采用id代替，减少映射
2.同样的解构采用循环，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: 规模, id: 'C' },
            { name: 风险, id: 'D' },
            { name: 风险2, id: 'E' },
            { name: 风险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>
        );
    }
}

答题不易，请楼主采纳

Answer 2

首先, 这和 react 无关.

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>

Answer 3

 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>
     ..........