如图效果 点击两个不同的按钮 分别显示不同的组件内容
构建两个组件
分别为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>