我正在开发这个项目,其中前端是React,UIkit是用户界面.部件之间的集成看起来很难实现.我要解释原因.有一个Modal组件,类似于
export class Modal extends Component { static getByName = name => UIkit.modal(`[data-modal-name='${name}']`) static show = name => { const modal = Modal.getByName(name) if (modal) modal.show() } static hide = name => { const modal = Modal.getByName(name) if (modal) modal.hide() } render() { // a modal } }
这是以这种方式使用的
export const LoginFormModal = props => ( <Modal name="login-form" className="login-form-modal" hideClose> <LoginForm /> </Modal> )
在需要的地方以编程方式调用show / hide(甚至还原为redux的动作)
Modal.hide("login-form")
这是一个Redux动作,就像这样
export const login = credentials => { return dispatch => { dispatch(showLoader()) API.authentication.login( credentials,response => { setCurrentUser( Object.assign({},response.user,{ user_id: response.user.id }) ) Modal.hide("login-form") dispatch(loginSucceded(response)) dispatch(hideLoader()) dispatch(push("/")) dispatch(fetchNotificationsCounter()) },error => { dispatch(loginFailed(error)) dispatch(hideLoader()) } ) } }
这似乎有效.直到你离开组件.当你回到它时,第二次以编程方式隐藏不再起作用.
任何人都可以引导我如何以更适合反应的方式整合零件?
使用操作dom(显示,隐藏)的uikit部分显然很难与React连接(可能你不应该),但是:
你需要通过传递模态状态的bool(例如modalopen)来移动函数show的调用并隐藏在Component内部.一个好的钩子是componentWillReceiveProps,它可以用来检查previus道具
componentWillReceiveProps(nextProps) { if (nextProps.modalopen !== this.props.modalopen) { if (nextProps.modalopen) { getByName(...).show() } else { getByName(...).hide() } } }
(这是在Modal类中)