条件渲染 React 组件并保持 DRY 的最佳方法 [英] Best way to conditional render React components and keep it DRY

问题描述

我有一个应用程序在删除时显示确认模式.
这是完整的代码:
https://codesandbox.io/s/vkz5xm8r0
在 components/Modal.js 我有一些条件渲染.如果我想根据这些条件设置整个模式的样式怎么办?最好的方法是什么?
例如.如何设置整个模态的样式，使其外观改变如下:
https://imgur.com/a/pK5Zu

解决方案

重新组织了一下代码.我相信这会使代码更简洁，更容易设计样式.并希望回答你的问题:)

//'components/Modal.js'从反应"导入反应；从'react-loading'导入ReactLoading；类模态扩展 React.Component {构造函数(道具){超级(道具)；这个.state = {status: 'prompting'//'提示', 'deleting', 'deleted'};}删除用户 = () =>{this.setState({ status: 'deleting' });//模拟异步加载动作设置超时(() =>这个.setState({状态:已删除"}),2000,);//模拟promise(上面的函数然后下面的这个)setTimeout(() => this.props.removeUser(this.props.data), 2001);};closeModal = () =>{this.props.closeModal();this.setState({ status: 'prompting' });};使成为() {常量 { id, name } = this.props.data;常量 {状态} = this.state;//灰色背景常量背景样式 = {位置:'固定'，顶部:0，底部:0，左:0，对:0，backgroundColor: 'rgba(0,0,0,0.3)',填充:50，};//模态窗口"常量 modalStyle = {背景颜色:'#fff'，边界半径:3，最大宽度:400，最小高度:200，边距:'0自动'，填充:30，};常量模态 = {"提示": (
<ReactLoading type="spin" color="#444"/></div></div>),"已删除": (<div className="deleted"><h5>已删除 </h5><button onClick={this.closeModal}>OK</button></div>)};如果(this.props.displayModal){返回 (<div className="backdrop" style={backdropStyle}><div className="modal" style={modalStyle}>{模态[状态]}</div></div>);}别的返回空值；}}导出默认模态；

I have an app showing confirmation modal on delete.
Here is the full code:
https://codesandbox.io/s/vkz5xm8r0
In components/Modal.js I have some conditional render. What if I want to style the whole modal based on those conditions? What is the best way to do so?
Eg. how to style the whole modal so it changes appearance like so:
https://imgur.com/a/pK5Zu

解决方案

Reorganised the code a bit. I believe this makes the code cleaner and easier to style. And hopefully answers your question :)

// '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 组件并保持 DRY 的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！