我有一个应用程序在删除时显示确认模式。
这是完整的代码：
https :
//codesandbox.io/s/vkz5xm8r0 在 components/Modal.js 中，我有一些条件渲染。如果我想根据这些条件设置整个模态的样式怎么办？这样做的最佳方法是什么？
例如。如何设置整个模态的样式，使其外观像这样改变：https :
//imgur.com/a/pK5Zu
条件渲染 React 组件并保持 DRY 的最佳方法
IT技术
javascript
reactjs
modal-dialog
frontend
2021-05-10 09:16:46
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;