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= {&nbsp;&nbsp; &nbsp; 'visible': 'A';}change = (value) => {&nbsp; this.setState({ 'visible': value });}<li><span className={this.state.visible === 'A' ? 'paging_touch':null} onClick={()=>this.change('A')}>概览</span></li>

Answer 2

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