Javascript 在React JS中构建引导模式和通知的正确方法?
我希望在我的应用程序中有modals和通知,由于使用了旧的jQuery引导,创建modals和通知非常容易,但是现在我对如何使用react组件系统在虚拟DOM中实现这一点感到非常困惑 这就是我认为在组件内的react中构建模态的标准react方法:Javascript 在React JS中构建引导模式和通知的正确方法?,javascript,reactjs,ecmascript-6,Javascript,Reactjs,Ecmascript 6,我希望在我的应用程序中有modals和通知,由于使用了旧的jQuery引导,创建modals和通知非常容易,但是现在我对如何使用react组件系统在虚拟DOM中实现这一点感到非常困惑 这就是我认为在组件内的react中构建模态的标准react方法: Index/Router Component > Main Layout Component > {...Page Components... } {...Child Component}
Index/Router Component >
Main Layout Component >
{...Page Components... }
{...Child Component}
{<Modal /> or <Notification />}
索引/路由器组件>
主布局组件>
{…页面组件…}
{…子组件}
{或}
问题是我不想在我的子组件中不断地导入和创建
或
组件,而可能只是调用一个实用函数,比如{app.notify({type:'success',message:'some message'})
或app.modal({…customconfig})
和已在my主布局组件中定义,它们通过任何子组件触发
这方面的任何帮助都会很好,谢谢 您不需要将模态组件保留在层次结构中。您的Modal
组件应该是一个独立的组件,它需要适当的道具来决定需要显示什么。例如
<Modal message={"This is my modal"} showOkCancel={true} showYesNo={false} handleOkYes={()=>console.log("OK clicked")} handleCancelNo={()=>console.log("Cancel clicked"} />
console.log(“单击确定”)}handleCancelNo={()=>console.log(“单击取消”)}/>
在上面的示例中,模式
接受许多道具,这些道具将帮助它决定要显示的消息、要显示的按钮以及需要在所述按钮单击时采取的操作
这种组件可以位于组件层次结构之外,并且可以导入到需要显示模式的任何组件中。父组件只需传递适当的道具即可显示模式
希望这能有所帮助。下面是我解决这个问题的方法
首先,以下是您希望如何构造模式和通知组件:
{Index/Router Component}
{Main Layout Component <Modal /> or <Notification />}
{...Page Components... }
{...Child Component calls app.modal({...config}) or app.notify(...config)}
或
app.modal({
是的,
类名:“全屏图像模式”,
尺寸:“模态lg”,
html:()=>{
返回();
}
})
我确实找到了我的问题的解决方案,它与您的答案有点类似。今晚将发布我的解决方案。效果很好。
import React from "react";
import {Link} from 'react-router';
import NotificationSystem from 'react-notification-system';
import AppHeader from "#/ui/header/AppHeader";
import AppFooter from "#/ui/footer/AppFooter";
import Modal from "#/ui/modals/modal/Modal";
import "@/main.scss";
import './layout.scss';
export default class Layout extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
app.notify.clear = this.refs.notificationSystem.clearNotifications;
app.notify = this.refs.notificationSystem.addNotification;
app.modal = this.refs.modal.updateProps;
}
render() {
return (
<div class="app">
<div class="header">
<AppHeader page={this.props.location.pathname.replace('/', '')}/>
</div>
<div class="body">
{this.props.children}
</div>
<div class="footer">
<AppFooter />
</div>
<NotificationSystem ref="notificationSystem" style={false} />
<Modal ref="modal" />
</div>
);
};
}
import React from "react";
import ReactDOM from 'react-dom';
import SVGInline from "react-svg-inline";
import {closeSvg} from '#/utils/Svg';
export default class Modal extends React.Component {
constructor(props) {
super(props);
this.state = {
showHeader: true,
showFooter: false,
title: "",
size: '',
className: '',
id: '',
footerContent: null,
showSubmitBtn: true,
showCancelBtn: true,
cancelBtnText: "Cancel",
successBtnText: "Save Changes",
onModalClose: () => {},
showModal: false,
html: () => {}
}
this.updateProps = this.updateProps.bind(this);
this.hideModal = this.hideModal.bind(this);
}
componentWillMount() {
var self = this;
var $modal = $(ReactDOM.findDOMNode(this));
}
componentDidUpdate(prevProps, prevState) {
if(this.state.showModal) {
$('body').addClass('modal-open');
} else {
$('body').removeClass('modal-open');
}
}
componentWillUnmount() {
// $('body').removeClass("modal-open");
}
componentWillReceiveProps(nextProps) {
console.log(nextProps);
}
updateProps(args) {
let merged = {...this.state, ...args};
this.setState(merged);
}
hideModal() {
this.setState({
showModal: false
});
this.state.onModalClose();
}
buildFooter() {
if(this.props.footerContent) {
return (
<div class="content">
{this.props.footerContent}
</div>
)
} else if(this.props.showCancelBtn && this.props.showSubmitBtn) {
return (
<div class="buttons">
<button type="button" class="btn btn-default" data-dismiss="modal" onClick={this.props.onModalClose}>{this.props.cancelBtnText}</button>
<button type="button" class="btn btn-success">{this.props.successBtnText}</button>
</div>
);
} else if(this.props.showCancelBtn) {
return (<button type="button" class="btn btn-default" data-dismiss="modal" onClick={this.props.onModalClose}>Close</button>);
} else if(this.props.showSubmitBtn) {
return (<button type="button" class="btn btn-success">Save changes</button>);
}
}
render() {
let {
id,
className,
onModalClose,
size,
showHeader,
title,
children,
showFooter,
showModal,
html
} = this.state;
return (
<div class={`modal-wrapper`} >
{
showModal ?
<div class={`modal fade in ${className}`} role="dialog">
<div class="bg" ></div>
<div class={`modal-dialog ${size}`}>
<div class="modal-content">
{ showHeader ?
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<SVGInline svg={closeSvg} />
</button>
<h4 class="modal-title">{ title }</h4>
</div> : '' }
<div class="modal-body" >
{html()}
</div>
{ showFooter ?
<div class="modal-footer">
{ this.buildFooter() }
</div> : ''
}
</div>
</div>
</div>
: ''
}
</div>
);
}
}
app.notify({
message: message,
level: 'error'
});
app.modal({
showModal: true,
className: "fullscreen-image-modal",
size: "modal-lg",
html: () => {
return (<img src={listingManager.LISTINGS_PATH + imgUrl} />);
}
})