19React中手动切换组件

如图效果 点击两个不同的按钮 分别显示不同的组件内容

构建两个组件

分别为Child12.js和Child13.js

import React, { Component } from 'react'

export default class Child12 extends Component {
    render() {
        return (
            <div>
                我是子组件12
            </div>
        )
    }
}
import React, { Component } from 'react'

export default class Child13 extends Component {
    render() {
        return (
            <div>
                我是子组件13
            </div>
        )
    }
}

在app.js中分别引入以后

在对应的事件中 点击按钮对 targetChild重新进行赋值即可

   <button onClick={
                    ()=>{
                        this.setState({
                            targetChild:Child12
                        })
                    }
                }>点击显示12</button>
                <button onClick={
                     ()=>{
                        this.setState({
                            targetChild:Child13
                        })
                    }
                }>点击显示13</button>
                <this.state.targetChild>
                </this.state.targetChild>

 

发布了19 篇原创文章 · 获赞 34 · 访问量 1万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览