Question

我有一个应用程序在删除时显示确认模式这是完整的代码：
https://codesandbox.io/s/vkz5xm8r0
在components / 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;

条件渲染的最佳方法React组件并保持干燥

1 个答案: