React-实现点击切换组件目的当用户点击某元素，将在页面切换为某个组件思路新建三个React组件和三个被点击的DOM元

目的

当用户点击某元素，将在页面切换为某个组件

思路

新建三个React组件和三个被点击的DOM元素
给三个被点击的DOM元素添加点击事件，传输参数并触发回调函数
回调函数，收到参数，修改数据
渲染函数, 监听数据变化，渲染不同的组件

步骤

新建三个组件，类似于下面的代码

import * as React from 'react';

class PotatoCount extends React.Component {
  public render() {
    return (
      <div className="PotatoCount" id="PotatoCount">
        PotatoCount
      </div>
    );
  }
}

export default PotatoCount;

导入三个子组件，并在父组件新建state对象，其中的render值为空

import TotalCount from './TotalCount';
import PotatoCount from './PotatoCount';
import MissionCount from './MissionCount';

class Statistics extends React.Component {
  constructor() {
    super(props);
    this.state = {
      render: ''
    }
  }

给三个被点击的DOM元素添加点击事件onClick={()=>{this.ShowComponent('showHideTotalCount')}}，传输参数并触发回调函数

public render() {
    return (
      <div >
          <ul>
            <li onClick={()=>{this.ShowComponent('showHideTotalCount')}}>统计</li>
            <li onClick={()=>{this.ShowComponent('showHidePotatoCount')}}>番茄历史</li>
            <li onClick={()=>{this.ShowComponent('showHideMission')}}>累计完成11个任务</li>
          </ul>
     <div/>

回调函数根据传入的参数，修改state的render值

  ShowComponent(name:string){
    this.setState({render:name})
  }

渲染函数根据state的render值，返回不同的组件

  renderComponent =()=>{
    switch (this.state.render) {
      case 'showHideTotalCount': return <TotalCount/>
      case 'showHidePotatoCount': return <PotatoCount/>
      case 'showHideMission': return <MissionCount/>
      default: return <TotalCount/>
    }
  }
  
  public render() {
    return (
      <div className="Statistics" id="Statistics">
          <ul>
            <li onClick={()=>{this.ShowComponent('showHideTotalCount')}}>统计</li>
            <li onClick={()=>{this.ShowComponent('showHidePotatoCount')}}>番茄历史</li>
            <li onClick={()=>{this.ShowComponent('showHideMission')}}>累计完成11个任务
            </li>
          </ul>
      
           <div>
             {this.renderComponent()}
           </div>
        </div>   
    }

效果图

完整代码

import * as React from 'react';

class PotatoCount extends React.Component {
  public render() {
    return (
      <div className="Component" id="PotatoCount">
        PotatoCount
      </div>
    );
  }
}
export default PotatoCount;

// 省略代码
class TotalCount ******* export ****
class MissionCount ***** export ****


import TotalCount from './TotalCount';
import PotatoCount from './PotatoCount';
import MissionCount from './MissionCount';

class Statistics extends React.Component {
  constructor() {
    super(props);
    this.state = {
      render: ''
    }
  }
  
 ShowComponent(name:string){
    this.setState({render:name})
  }
  
 renderComponent =()=>{
    switch (this.state.render) {
      case 'showHideTotalCount': return <TotalCount/>
      case 'showHidePotatoCount': return <PotatoCount/>
      case 'showHideMission': return <MissionCount/>
      default: return <TotalCount/>
    }
  }
  
public render() {
    return (
      <div>
          <ul>
            <li onClick={()=>{this.ShowComponent('showHideTotalCount')}}>统计</li>
            <li onClick={()=>{this.ShowComponent('showHidePotatoCount')}}>番茄历史</li>
            <li onClick={()=>{this.ShowComponent('showHideMission')}}>累计完成11个任务
            </li>
          </ul>
      
           <div>
             {this.renderComponent()}
           </div>
        </div>   
    }

React-实现点击切换组件

目的

思路

步骤

完整代码

更多信息