条件付きレンダリングの最善の方法リアクションコンポーネントを残しておいてくださいDRY

Question

削除時に確認モーダルを示すアプリがあります。
完全なコードは次のとおりです。
https://codesandbox.io/s/vkz5xm8r0
コンポーネント/ Modal.jsでは、条件付きレンダリングがいくつかあります。これらの条件に基づいてモーダル全体のスタイルを設定したい場合はどうすればよいですか？そうする最善の方法は何ですか？例えば、
など。モーダル全体のスタイルを設定して外観を変更する方法：
https://imgur.com/a/pK5Zu

Answer 1

コードを少し再構成しました。私は、これがコードをより洗練されたものにしています。うまくいけばあなたの質問に答えてください:)

// 'components/Modal.js' 
import React from 'react'; 
import ReactLoading from 'react-loading'; 

class Modal extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     status: 'prompting' //'prompting', 'deleting', 'deleted' 
    }; 
    } 
    removeUser =() => { 
    this.setState({ status: 'deleting' }); 
    // simulate async loading action 
    setTimeout(
    () => 
     this.setState({ 
      status: 'deleted' 
     }), 
     2000, 
    ); 
    //simulate promise (function above then this below) 
    setTimeout(() => this.props.removeUser(this.props.data), 2001); 
    }; 
    closeModal =() => { 
    this.props.closeModal(); 
    this.setState({ status: 'prompting' }); 
    }; 
    render() { 
    const { id, name } = this.props.data; 

    const {status} = this.state; 
    // The gray background 
    const backdropStyle = { 
     position: 'fixed', 
     top: 0, 
     bottom: 0, 
     left: 0, 
     right: 0, 
     backgroundColor: 'rgba(0,0,0,0.3)', 
     padding: 50, 
    }; 

    // The modal "window" 
    const modalStyle = { 
     backgroundColor: '#fff', 
     borderRadius: 3, 
     maxWidth: 400, 
     minHeight: 200, 
     margin: '0 auto', 
     padding: 30, 
    }; 

    const modal = { 
     "prompting": (<div className="prompting"> 
         <h5>You want to delete user {id} : {name}</h5> 
         <button onClick={this.removeUser}>Delete</button> 
         <button onClick={this.closeModal}>Cancel</button> 
        </div> 
    ), 
     "deleting": (<div className="deleting"> 
         <h5> Deleting </h5> 
         <div> 
         <ReactLoading type="spin" color="#444" /> 
         </div> 
        </div>), 
     "deleted": (<div className="deleted"> 
        <h5> Deleted </h5> 
        <button onClick={this.closeModal}>OK</button> 
        </div>) 
    }; 

    if(this.props.displayModal){ 
     return (
     <div className="backdrop" style={backdropStyle}> 
      <div className="modal" style={modalStyle}> 
      {modal[status]} 
      </div> 
     </div> 
    ); 
    } 
    else 
     return null; 

    } 
} 

export default Modal;