在父組件上調用函數-React

Question

我在react上創建一個Toast組件，它在show()被調用時show() ，如何在其他組件上調用show() ？

export default class Toast extends Component{
constructor(props){
    super(props)
    this.state={
        show:false
    }
}
show(){       
    this.setState({show:true})
    setTimeout(() => {
        this.setState({show:false})
    }, this.props.time)
}

render(){
    return(
        <div className={`toast ${this.state.show ? "show":""}`} >{this.props.message}</div>
    )
}}

首先我會在Toast上使用ComponentDidMount()調用show() ，這是一個很好的策略嗎？

Answer 1

<Toast message="test" time={3000} showToast={true}/>


export default class Toast extends Component{
constructor(props){
    super(props)
    this.state={
        show:false
    }
}
show(){ 
  if(this.props.showToast == true){      
    this.setState({show:true})
    setTimeout(() => {
        this.setState({show:false})
    }, this.props.time)
 }
}

render(){
    return(
        <div className={`toast ${this.state.show ? "show":""}`} >{this.props.message}</div>
    )
}}

在該組件中，您嘗試調用toast，根據條件傳遞狀態，將showToast道具設置為true。

在其他方面，

<Toast message="test" time={3000} showToast={this.state.showToast}/>

this.state.showToast應該在調用Toast的組件的狀態下定義。

讓我知道，是否有效。