Question

我在react上创建了一个Toast组件，它显示了何时调用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上使用show()来致电ComponentDidMount()，这是一个好策略吗？

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的组件的状态下定义。

如果有效，请告诉我。

在父组件上调用函数-React

1 个答案: