reactjs – 在React中的UIkit模态：集成

发布时间：2020-12-15 20:49:39 所属栏目：百科来源：网络整理

导读：我正在开发这个项目,其中前端是React,UIkit是用户界面.部件之间的集成看起来很难实现.我要解释原因.有一个Modal组件,类似于 export class Modal extends Component { static getByName = name = UIkit.modal(`[data-modal-name='${name}']`) static show = n

我正在开发这个项目,其中前端是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类中)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!