Question

我一直在google搜索很长时间。但我还没找到任何东西。我正在寻找一种方法来实现与reactjs的切换效果。请看下面的代码。

{3, -3, 3, -3, 3, -3}

Answer 1

我会将每个项目封装在自己的组件中，如下所示：

var Demo = React.createClass({
  render: function() {
    return (
      <div>
        <DemoItem />
        <DemoItem />
        <DemoItem />
      </div>
    );
  }
});

var DemoItem = React.createClass({
  getInitialState: function() {
    return { show: false };
  },
  toggleShow: function() {
    this.setState({ show: !this.state.show });
  },
  render: function() {
    return (
      <div className="demo" onClick={this.toggleShow}>
        Demo
        {this.state.show ? <DemoSub /> : null}
      </div>
    );
  }
});

var DemoSub = React.createClass({
  render: function() {
    return <div>Demo sub</div>
  }
});

Answer 2

import React, { Component } from 'react';  

class Person extends Component {

   state={
        showPerson:false,
    }

toggleName=()=>{
    const doesShow = this.state.showPerson;
    this.setState({
        showPerson:!doesShow
    })
}

render() {

    let personList = null;
if(this.state.showPerson) {
    personList = (
        <div> Show Content </div>
    )
}
    return (
        <div>
             <button onClick={this.toggleName}>Switch</button>
             {personList}
        </div>
    );
}
}

export default Person;

如何使用react js实现切换效果？

2 个答案: