React：作成不可能なアラートコンポーネントを作成する

Question

エラーを表示するためにブートストラップalertクラスを使用するReactコンポーネントを作成しようとしています。問題は私がそれを却下できるようにしたいのですが、エラーを再度表示する必要がある場合、アラートdiv内の閉じるボタンにハンドラをアタッチして非表示にしても、再レンダリングされません。例：

class Alert extends React.Component { 
    constructor(props) { 
    super(props) 
    this.handleClick = this.handleClick.bind(this) 
    this.state = { 
     display: true 
    } 
    } 

    handleClick() { 
    this.setState({ 
     display: false 
    }) 
    } 

    render() { 
    return (
     <div> 
     {this.state.display && 
      <div className={"alert alert-" + this.props.type + " alert-dismissible mt10"}> 
      {this.props.message} 
      <button type="button" className="close" onClick={this.handleClick} data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      </div> 
     } 
     </div> 
    ) 
    } 
} 

これはアラートコンポーネントの動作コードで、内部の閉じるボタンをクリックすると非表示になります。私はAlertコンポーネントを表示/非表示する必要があるかどうかを示すブール値を持っている

class App extends React.Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     displayUploadError: false 
    } 
    this.handleRequest = this.handleRequest.bind(this) 
    } 


    handleRequest(image_url) { 
     this.setState({ 
     displayUploadError: true 
     }) 
    } 


    render() { 
    return (
     <div className="demo__wrap"> 
     <FormImageUpload 
      handleRequest={this.handleRequest} 
      displayUploadError={this.state.displayUploadError} 
     /> 
     </div> 
    ) 
    } 
} 

：

class FormImageUpload extends React.Component { 
    ... 

    render() { 
    return (
     <form> 
     <input type="text" placeholder="Paste Image Url"/> 
     {this.props.displayUploadError && 
      <Alert type="danger" message="There was an error trying to process the image. Please try again." /> 
     } 
     <button type="submit" className="btn btn-primary mt10">SEND</button> 
     </form> 
    ) 
    } 
} 

ルート親：ここで問題です。しかし、アラートを閉じても、それは再び表示されません。これをどうすれば解決できますか？

Answer 1

警告の状態を設定するのではなく、フォームに状態を​​設定し、状態をpropsとして渡します。そうすればうまくいくはずです。 警告のonclickは、フォームアップロードコンポーネントの状態を、コールバック関数を使用して更新します。

Answer 2

はいブール値を渡すと、非表示にすることもできます。 モックコードはこちら

If (boolean) { 
Return Alert 
} 
Else { 
Return null 
}