react写法

Question

我想知道这段react代码有没有什么简略写法，初写react，不是很懂，望各位大神帮忙忙。class Paging extends Component {  constructor(props){    super(props)    this.state={      visibleA:true,      visibleB:false,    }  }  change=(value)=>{    if(value===1){      this.setState({        visibleA:true,        visibleB:false,      })    }else if(value === 2){      this.setState({        visibleB:true,        visibleA: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>          </ul>      </div    );  }}    export default Paging;我想知道这段react代码有没有什么简略写法，初写react，不是很懂，望各位大神帮忙忙。

Answer 1

首先, 这和 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 2

 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>

     ..........