主要原因:组件Comp1写在了 ReactDOM.render(<Comp/>,document.querySelector('.container'))挂载之后导致组件Comp1无法识别。如下
解决:把组件Comp1上调至ReactDOM.render(<Comp/>,document.querySelector('.container'))之前就行。
class Comp extends React.Component {
state={
isShow:true
};
toggle=()=>{
const {isShow} = this.state
this.setState({isShow:!isShow})
}
render(){
const {isShow} = this.state
return (
<div>
<button onClick={this.toggle}>toggle</button>
<Comp1 isShow={isShow}/>
</div>
)
}
}
ReactDOM.render(<Comp/>,document.querySelector('.container'))
class Comp1 extends React.Component {
render(){
const {isShow} = this.props
if(isShow) {
return (
<div>这是组件1</div>
)
}
return (
<div>这是组件2</div>
)
}
}