在 React Material-ui 上显示对话框

Question

我在我的 React 应用程序中使用 material-ui 的 Dialog component。如何将我的组件设置为变量，以便调用onShow() 方法？

Answer 1

我建议阅读Dan Abramov's answer，了解如何在 React 中实现模式。

为了使用 material-ui 对话框，您可以将他的示例中的 DeletePostModal 替换为以下内容：

import { deletePost, hideModal } from '../actions';
import React, {Component} from 'react';
import {connect} from "react-redux";
import {Button, Dialog, DialogActions, DialogTitle} from "material-ui";
import PropTypes from 'prop-types';

const DeletePostModal = ({ post, dispatch }) => (
  <Dialog open={true}>
       <DialogTitle>Delete post {post.name}?</DialogTitle>
            <DialogActions>
                 <button onClick={() => {
                      dispatch(deletePost(post.id)).then(() => {
                           dispatch(hideModal());
                      });
                  }}>
                        Yes
                  </button>
                  <button onClick={() => dispatch(hideModal())}>
                        Nope
                  </button>
        </DialogActions>
   </Dialog>
)

export default connect(
  (state, ownProps) => ({
    post: state.postsById[ownProps.postId]
  })
)(DeletePostModal)

Answer 2

添加Dialog 组件时，只需为其添加一个引用（例如ref="dialog"）：

<Dialog ref="dialog" title="..." actions="...">
  dialog content
</Dialog>

然后您可以使用 this.refs.dialog.onShow(...) 从您的所有者组件代码中引用它。

Dialog component 页面实际上在幕后使用了 refs，正如您从其 source code 中看到的那样。