我正在构建一个需要在某些情况下显示确认对话框的应用程序。
假设我想删除一些东西，然后我会分派一个动作，deleteSomething(id)这样一些减速器将捕获该事件并填充对话框减速器以显示它。
当这个对话框提交时，我的疑问就来了。
编辑：
为了更清楚：
deleteThingA(id) => show dialog with Questions => deleteThingARemotely(id)
createThingB(id) => Show dialog with Questions => createThingBRemotely(id)
所以我试图重用对话框组件。显示/隐藏对话框不是问题，因为这可以在减速器中轻松完成。我要指定的是如何根据在左侧启动流程的操作从右侧分派操作。
我建议的方法有点冗长，但我发现它可以很好地扩展到复杂的应用程序中。当你想显示一个模态时，触发一个描述你想看到哪个模态的动作：
this.props.dispatch({
type: 'SHOW_MODAL',
modalType: 'DELETE_POST',
modalProps: {
postId: 42
}
})
（字符串当然可以是常量；为简单起见，我使用内联字符串。）
然后确保你有一个只接受这些值的减速器：
const initialState = {
modalType: null,
modalProps: {}
}
function modal(state = initialState, action) {
switch (action.type) {
case 'SHOW_MODAL':
return {
modalType: action.modalType,
modalProps: action.modalProps
}
case 'HIDE_MODAL':
return initialState
default:
return state
}
}
/* .... */
const rootReducer = combineReducers({
modal,
/* other reducers */
})
伟大的！现在，当您调度一个动作时，state.modal将更新以包含有关当前可见模式窗口的信息。
在组件层次结构的根部，添加一个<ModalRoot>连接到 Redux 存储的组件。它将侦听state.modal并显示适当的模态组件，从state.modal.modalProps.
// These are regular React components we will write soon
import DeletePostModal from './DeletePostModal'
import ConfirmLogoutModal from './ConfirmLogoutModal'
const MODAL_COMPONENTS = {
'DELETE_POST': DeletePostModal,
'CONFIRM_LOGOUT': ConfirmLogoutModal,
/* other modals */
}
const ModalRoot = ({ modalType, modalProps }) => {
if (!modalType) {
return <span /> // after React v15 you can return null here
}
const SpecificModal = MODAL_COMPONENTS[modalType]
return <SpecificModal {...modalProps} />
}
export default connect(
state => state.modal
)(ModalRoot)
我们在这里做了什么？ModalRoot读取它所连接的当前modalType和modalProps，并渲染相应的组件，例如or 。每个模态都是一个组件！state.modalDeletePostModalConfirmLogoutModal
这里没有一般规则。它们只是 React 组件，可以调度动作，从 store 状态读取一些东西，并且恰好是 modals。
例如，DeletePostModal可能看起来像：
import { deletePost, hideModal } from '../actions'
const DeletePostModal = ({ post, dispatch }) => (
<div>
<p>Delete post {post.name}?</p>
<button onClick={() => {
dispatch(deletePost(post.id)).then(() => {
dispatch(hideModal())
})
}}>
Yes
</button>
<button onClick={() => dispatch(hideModal())}>
Nope
</button>
</div>
)
export default connect(
(state, ownProps) => ({
post: state.postsById[ownProps.postId]
})
)(DeletePostModal)
DeletePostModal连接到商店，因此它可以显示帖子标题，并且像任何连接的组件一样工作：它可以调度操作，包括在hideModal需要隐藏自身时。
为每个“特定”模态复制粘贴相同的布局逻辑会很尴尬。但是你有组件，对吧？因此，您可以提取一个不知道特定模式做什么的表示组件，但可以处理它们的外观。 <Modal>
然后，特定的模态例如DeletePostModal可以使用它进行渲染：
import { deletePost, hideModal } from '../actions'
import Modal from './Modal'
const DeletePostModal = ({ post, dispatch }) => (
<Modal
dangerText={`Delete post ${post.name}?`}
onDangerClick={() =>
dispatch(deletePost(post.id)).then(() => {
dispatch(hideModal())
})
})
/>
)
export default connect(
(state, ownProps) => ({
post: state.postsById[ownProps.postId]
})
)(DeletePostModal)
由您自己决定一组可以在您的应用程序中接受的道具，<Modal>但我想您可能有几种模式（例如信息模式、确认模式等），以及它们的几种样式。
关于模态框的最后一个重要部分是，通常我们希望在用户点击外部或按下 Escape 时隐藏它们。
我建议您不要自己实现它，而不是给您关于实现它的建议。考虑到可访问性，很难做到正确。
相反，我建议您使用可访问的现成模态组件，例如react-modal. 它是完全可定制的，你可以在里面放任何你想要的东西，但它可以正确处理可访问性，以便盲人仍然可以使用你的模态。
你甚至可以react-modal自己封装<Modal>，接受特定于你的应用程序的 props 并生成子按钮或其他内容。这一切都只是组件！
有不止一种方法可以做到这一点。
有些人不喜欢这种方法的冗长，更喜欢有一个<Modal>组件，他们可以使用一种称为“门户”的技术在组件内部直接渲染。Portals 让你在你的内部渲染一个组件，而实际上它会在 DOM 中的预定位置渲染，这对于模态框来说非常方便。
事实上react-modal，我之前链接到的内容已经在内部完成了，所以从技术上讲，你甚至不需要从顶部渲染它。我仍然觉得将我想要显示的模态与显示它的组件分离很好，但你也可以react-modal直接从你的组件中使用，并跳过我上面写的大部分内容。
我鼓励您考虑这两种方法，对它们进行试验，然后选择最适合您的应用程序和团队的方法。
更新：React 16.0 通过ReactDOM.createPortal 链接引入了门户
更新：React 的下一个版本（Fiber：可能是 16 或 17）将包含一个创建门户的方法：ReactDOM.unstable_createPortal() link
Dan Abramov 回答第一部分很好，但涉及很多样板。正如他所说，您也可以使用门户网站。我会稍微扩展一下这个想法。
门户的优点是弹出窗口和按钮非常靠近 React 树，使用 props 进行非常简单的父/子通信：您可以轻松地使用门户处理异步操作，或者让父自定义门户。
门户允许您直接在document.body深度嵌套在 React 树中的元素内进行渲染。
这个想法是，例如，您将以下 React 树渲染到正文中：
<div className="layout">
<div className="outside-portal">
<Portal>
<div className="inside-portal">
PortalContent
</div>
</Portal>
</div>
</div>
你得到作为输出：
<body>
<div class="layout">
<div class="outside-portal">
</div>
</div>
<div class="inside-portal">
PortalContent
</div>
</body>
该inside-portal节点已在内部翻译<body>，而不是其正常的、深度嵌套的地方。
门户对于显示应该放在现有 React 组件之上的元素特别有用：弹出窗口、下拉列表、建议、热点
不再有 z-index 问题：门户允许您渲染到<body>. 如果您想显示弹出窗口或下拉菜单，如果您不想与 z-index 问题作斗争，这是一个非常好的主意。门户元素document.body按安装顺序添加，这意味着除非您使用z-index，否则默认行为将按安装顺序将门户堆叠在彼此之上。实际上，这意味着您可以安全地从另一个弹出窗口中打开一个弹出窗口，并确保第二个弹出窗口将显示在第一个弹出窗口的顶部，甚至无需考虑z-index.
最简单：使用本地 React 状态：如果您认为对于一个简单的删除确认弹出窗口，不值得拥有 Redux 样板，那么您可以使用门户网站，它可以大大简化您的代码。对于这样的用例，交互非常本地化并且实际上是一个实现细节，你真的关心热重载、时间旅行、动作日志和 Redux 给你带来的所有好处吗？就个人而言，在这种情况下，我不使用本地状态。代码变得如此简单：
class DeleteButton extends React.Component {
static propTypes = {
onDelete: PropTypes.func.isRequired,
};
state = { confirmationPopup: false };
open = () => {
this.setState({ confirmationPopup: true });
};
close = () => {
this.setState({ confirmationPopup: false });
};
render() {
return (
<div className="delete-button">
<div onClick={() => this.open()}>Delete</div>
{this.state.confirmationPopup && (
<Portal>
<DeleteConfirmationPopup
onCancel={() => this.close()}
onConfirm={() => {
this.close();
this.props.onDelete();
}}
/>
</Portal>
)}
</div>
);
}
}
很简单：你仍然可以使用 Redux state：如果你真的想要，你仍然可以使用connect来选择是否DeleteConfirmationPopup显示。由于门户仍然深深地嵌套在您的 React 树中，因此自定义此门户的行为非常简单，因为您的父级可以将道具传递给门户。如果你不使用门户，你通常必须在你的 React 树的顶部渲染你的弹出窗口z-index原因，并且通常必须考虑诸如“如何根据用例自定义我构建的通用 DeleteConfirmationPopup”之类的事情。通常你会发现这个问题的解决方案相当老套，比如调度一个包含嵌套的确认/取消操作、翻译包键，或者更糟糕的是渲染函数（或其他不可序列化的东西）的操作。你不必对传送门这样做，并且可以只传递常规道具，因为DeleteConfirmationPopup它只是DeleteButton
门户对于简化代码非常有用。我不能没有他们了。
请注意，门户实现还可以帮助您使用其他有用的功能，例如：
react-portal或react-modal非常适合应该是全屏的弹出窗口、模式和叠加层，通常位于屏幕中间。
大多数 React 开发人员都不知道react-tether，但它是您可以在那里找到的最有用的工具之一。Tether允许您创建门户，但会相对于给定目标自动定位门户。这非常适合工具提示、下拉列表、热点、帮助框...如果您曾经遇到过位置absolute/relative和的任何问题z-index，或者您的下拉列表超出了您的视口，Tether 将为您解决所有这些问题。
例如，您可以轻松实现入职热点，单击后会扩展为工具提示：
真正的生产代码在这里。再简单不过了:)
<MenuHotspots.contacts>
<ContactButton/>
</MenuHotspots.contacts>
编辑：刚刚发现react-gateway允许将门户呈现到您选择的节点（不一定是正文）
编辑：似乎react-popper可以成为 react-tether 的不错替代品。PopperJS是一个库，它只计算一个元素的适当位置，而不直接接触 DOM，让用户选择他想要放置 DOM 节点的位置和时间，而 Tether 则直接附加到主体。
编辑：还有react-slot-fill这很有趣，可以通过允许将元素渲染到保留元素插槽来帮助解决类似问题，您可以将其放置在树中的任何位置
在这里可以找到来自 JS 社区的知名专家关于该主题的许多好的解决方案和有价值的评论。这可能表明问题并不像看起来那么微不足道。我认为这就是为什么它可能成为对该问题的怀疑和不确定性的根源。
这里的基本问题是，在 React 中，您只允许将组件安装到其父级，这并不总是所需的行为。但是如何解决这个问题呢？
我提出了解决方案，旨在解决此问题。更详细的问题定义、src 和示例可以在这里找到：https ://github.com/fckt/react-layer-stack#rationale
基本原理
react/react-dom带有 2 个基本假设/想法：
- 每个 UI 自然是分层的。这就是为什么我们有
components相互包裹的想法react-dom默认情况下（物理地）将子组件挂载到其父 DOM 节点问题是有时第二个属性不是您想要的。有时你想将你的组件挂载到不同的物理 DOM 节点，同时保持父子节点之间的逻辑连接。
典型示例是类似 Tooltip 的组件：在开发过程的某个阶段，您可能会发现需要为您的 : 添加一些描述
UI element：它将在固定层中渲染，并且应该知道它的坐标（即UI element坐标或鼠标坐标）并且在同时它需要信息是否需要立即显示，它的内容和来自父组件的一些上下文。此示例显示有时逻辑层次结构与物理 DOM 层次结构不匹配。
查看https://github.com/fckt/react-layer-stack/blob/master/README.md#real-world-usage-example以查看回答您问题的具体示例：
import { Layer, LayerContext } from 'react-layer-stack'
// ... for each `object` in array of `objects`
const modalId = 'DeleteObjectConfirmation' + objects[rowIndex].id
return (
<Cell {...props}>
// the layer definition. The content will show up in the LayerStackMountPoint when `show(modalId)` be fired in LayerContext
<Layer use={[objects[rowIndex], rowIndex]} id={modalId}> {({
hideMe, // alias for `hide(modalId)`
index } // useful to know to set zIndex, for example
, e) => // access to the arguments (click event data in this example)
<Modal onClick={ hideMe } zIndex={(index + 1) * 1000}>
<ConfirmationDialog
title={ 'Delete' }
message={ "You're about to delete to " + '"' + objects[rowIndex].name + '"' }
confirmButton={ <Button type="primary">DELETE</Button> }
onConfirm={ this.handleDeleteObject.bind(this, objects[rowIndex].name, hideMe) } // hide after confirmation
close={ hideMe } />
</Modal> }
</Layer>
// this is the toggle for Layer with `id === modalId` can be defined everywhere in the components tree
<LayerContext id={ modalId }> {({showMe}) => // showMe is alias for `show(modalId)`
<div style={styles.iconOverlay} onClick={ (e) => showMe(e) }> // additional arguments can be passed (like event)
<Icon type="trash" />
</div> }
</LayerContext>
</Cell>)
// ...
在我看来，最低限度的实现有两个要求。跟踪模态是否打开的状态，以及在标准反应树之外呈现模态的门户。
下面的 ModalContainer 组件实现了这些要求以及模态和触发器的相应渲染函数，触发器负责执行回调以打开模态。
import React from 'react';
import PropTypes from 'prop-types';
import Portal from 'react-portal';
class ModalContainer extends React.Component {
state = {
isOpen: false,
};
openModal = () => {
this.setState(() => ({ isOpen: true }));
}
closeModal = () => {
this.setState(() => ({ isOpen: false }));
}
renderModal() {
return (
this.props.renderModal({
isOpen: this.state.isOpen,
closeModal: this.closeModal,
})
);
}
renderTrigger() {
return (
this.props.renderTrigger({
openModal: this.openModal
})
)
}
render() {
return (
<React.Fragment>
<Portal>
{this.renderModal()}
</Portal>
{this.renderTrigger()}
</React.Fragment>
);
}
}
ModalContainer.propTypes = {
renderModal: PropTypes.func.isRequired,
renderTrigger: PropTypes.func.isRequired,
};
export default ModalContainer;
这是一个简单的用例......
import React from 'react';
import Modal from 'react-modal';
import Fade from 'components/Animations/Fade';
import ModalContainer from 'components/ModalContainer';
const SimpleModal = ({ isOpen, closeModal }) => (
<Fade visible={isOpen}> // example use case with animation components
<Modal>
<Button onClick={closeModal}>
close modal
</Button>
</Modal>
</Fade>
);
const SimpleModalButton = ({ openModal }) => (
<button onClick={openModal}>
open modal
</button>
);
const SimpleButtonWithModal = () => (
<ModalContainer
renderModal={props => <SimpleModal {...props} />}
renderTrigger={props => <SimpleModalButton {...props} />}
/>
);
export default SimpleButtonWithModal;
我使用渲染函数，因为我想将状态管理和样板逻辑与渲染模式和触发器组件的实现隔离开来。这允许渲染的组件是你想要的任何东西。在您的情况下，我想模态组件可能是一个连接的组件，它接收一个调度异步操作的回调函数。
如果您需要从触发器组件向模态组件发送动态道具，希望这种情况不会经常发生，我建议使用容器组件包装 ModalContainer 以管理其自身状态下的动态道具并增强原始渲染方法，例如所以。
import React from 'react'
import partialRight from 'lodash/partialRight';
import ModalContainer from 'components/ModalContainer';
class ErrorModalContainer extends React.Component {
state = { message: '' }
onError = (message, callback) => {
this.setState(
() => ({ message }),
() => callback && callback()
);
}
renderModal = (props) => (
this.props.renderModal({
...props,
message: this.state.message,
})
)
renderTrigger = (props) => (
this.props.renderTrigger({
openModal: partialRight(this.onError, props.openModal)
})
)
render() {
return (
<ModalContainer
renderModal={this.renderModal}
renderTrigger={this.renderTrigger}
/>
)
}
}
ErrorModalContainer.propTypes = (
ModalContainer.propTypes
);
export default ErrorModalContainer;
将 modal 包装到一个连接的容器中，并在此处执行异步操作。通过这种方式，您既可以访问 dispatch 以触发操作，也可以访问 onClose 道具。dispatch要从props到达，不要将mapDispatchToProps函数传递给connect.
class ModalContainer extends React.Component {
handleDelete = () => {
const { dispatch, onClose } = this.props;
dispatch({type: 'DELETE_POST'});
someAsyncOperation().then(() => {
dispatch({type: 'DELETE_POST_SUCCESS'});
onClose();
})
}
render() {
const { onClose } = this.props;
return <Modal onClose={onClose} onSubmit={this.handleDelete} />
}
}
export default connect(/* no map dispatch to props here! */)(ModalContainer);
呈现模态并设置其可见性状态的应用程序：
class App extends React.Component {
state = {
isModalOpen: false
}
handleModalClose = () => this.setState({ isModalOpen: false });
...
render(){
return (
...
<ModalContainer onClose={this.handleModalClose} />
...
)
}
}