我想测试一个用react-modal构建的组件。该库使用门户将实际模式安装在父级之外。酶中的 find 方法仅查找从包装元素开始的树，其中不包括开放模式。
据我所知，直到最近，门户网站还没有得到官方支持，但从 React 16 和 Enzyme 3 开始，它们应该得到支持（enzyme-252）
看起来开放门户可以通过安装酶的组件在 DOM 中访问，但找到它并不容易。我已经看到使用 refs 的策略（我宁愿不只是为了测试而添加）和 document.querySelector （比处理 ReactWrapper 更糟糕）。
最有前途的策略声称可以使用foundEl.node.portal（ react-modal-563）从其父级访问门户，但我还没有让它发挥作用（看来节点属性可能已被弃用，因为当我使用它时，我收到错误：
Attempted to access ReactWrapper::node, which was previously a private property on
Enzyme ReactWrapper instances, but is no longer and should not be relied upon.
Consider using the getElement() method instead.
有没有人找到更好的策略或让这个策略发挥作用？我使用Enzyme 3.1.1、React Enzyme Adapter 1.0.4和React 16.2作为参考。
const wrapper = mount(
<div>
<Provider store={store}>
<MyModal isOpen={true} />
</Provider>
</div>
);
console.log('modal node', wrapper.find(ReactModal).node) // error
console.log('modal element', …我有一个带主屏幕的应用程序，在这个屏幕上我正在渲染一个打开的模态button press，在Modal我有一个按钮应该将我导航到另一个屏幕，它导航正确但是当我导航到另一个屏幕时，模态没有没有消失，怎么隐藏？
添加代码进行演示
家：
import React, { Component } from 'react';
import Modal from './Modal';
class Home extends Component {
state = {
isModalVisible: false
};
toggleModal = () =>
this.setState({ isModalVisible: !this.state.isModalVisible });
render() {
const { navigate } = this.props.navigation;
<Modal
visible={this.state.isModalVisible}
navigation={this.props.navigation}
/>
);
}
}
export default Home;
模态：
import React, { Component } from "react";
import Modal from "react-native-modal";
class Modal extends Component { …我在模态模式中无法正常显示问题，当我单击按钮时，屏幕变为灰色，而没有显示模态内容，当我尝试在输入中插入文本时即使您看不到自己写的内容，也要这样做。
这是理解逻辑的代码：https : //medium.com/@olinations/build-a-crud-template-using-react-bootstrap-express-postgres-9f84cc444438
还有我的App.js（在这种情况下为List.js）代码：
import React, { Component } from "../../../node_modules/react";
import { Container, Row, Col } from "reactstrap";
import ModalForm from "../../Components/Modals/Modal";
import DataTable from "../../Components/Tables/DataTable";
import { CSVLink } from "react-csv";
class List extends Component {
state = {
items: []
};
getList = () => {
fetch("http://localhost:5000/api/azienda")
.then(res => res.json())
.then(items => this.setState({ items }))
.catch(err => console.log(err));
};
addItemToState = item => {
this.setState(prevState => ({
items: [...prevState.items, item]
}));
};
updateState = item …我目前正在创建一个 React todo 应用程序。所以基本上我有两个组件 TodoList 和 TodoItem
TodoList 组件将接收一个包含 title 作为属性的对象数组，并通过 TodoItem 组件映射到它
在我的 TodoItem 组件中，用户可以选择编辑或删除项目。如果用户选择编辑，则会使用文本区域显示带有现有标题的模式。但是，我在实现这个函数时遇到了麻烦，因为模态总是与数组的最后一个元素一起显示。
import React, { Component } from 'react'
import TodoItem from './TodoItem'
import { connect } from 'react-redux'
import { clear_todo } from '../store/actions/todoActions'
class Todolist extends Component {
clearList = (e) => {
e.preventDefault()
this.props.clearList(clear_todo());
}
handleChange = (index, title) => {
this.setState({
[index]: title
})
}
render() {
const { items, editItem } = this.props.todo
return (
<ul className="list-group my-5">
<h3 …我使用方法渲染简单项目（数字或字符串）的列表Array.map。我用来Modal添加/更新项目。但是，每次打开或关闭模式都会react重新渲染整个数组，即使数组保持不变。我觉得这是一种预期的行为。
多谢你们
/* Console output:
* ---------------
* ROOT: render component
* -> ITEM: render 1
* -> ITEM: render 2
* -> ITEM: render 3 (not in map)
* ROOT: open modal
* ROOT: render component
* -> ITEM: render 1
* -> ITEM: render 2
* -> ITEM: render 3 (not in map)
* MODAL: close Modal
* ROOT: render component
* -> ITEM: render 1
* …我开始在我的react-modal组件上收到此警告:
警告:propType失败:
contentLabel未指定必需的propModal.
它不会阻止模态正常工作,我只是在开发工具控制台中看到警告.我可以通过指定一些随机字符串来传递这个prop,但我不明白它实际上用于什么,以及为什么它是必需的.
我正在使用反应模式
该文档提到，默认情况下，当您单击叠加层时，模态应该关闭。即使我将shouldCloseOnOverlayClickprop设置为 true，这仍然不起作用。
我不知道有什么可能会阻止该事件发生。
如果这与任何内容相关/指示（我还没有弄清楚为什么会显示），我在 Chrome 开发人员工具中注意到我的模式的覆盖和内容节点都有一个未定义的类。我使用的所有 CSS 类都已定义并正常工作。
这是相关的 JSX 和 CSS，如果需要更多上下文，请告诉我。
JSX：
return (
<div className="Modal">
<Modal
className={{
base: 'Modal-content' + ' Modal-InputError-videoURL'
}}
overlayClassName={{
base: 'Modal-overlay'
}}
isOpen={true}
contentLabel="Modal"
>
{props.message}
<br />
<br />
<br />
<button
className="Modal-button"
onClick={events.handleCloseModal}
>
Close
</button>
</Modal>
</div>
)
CSS类：
.Modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.35);
z-index: 9998;
}
.Modal-content {
display: relative;
position: absolute;
top: 50%;
left: 50%; …有人有实施经验react-native-modal吗？当我使用它时，当我点击模态之外时，模态不会关闭。
这是我尝试过的
这是我想要显示模式的屏幕。
render() {
return (
<View style={{flex: 1}}>
<ScrollView>
// CONTENT HERE
{this._renderModal()} //rendering modal here
<FABs onFABsPress={this._showModal} /> // I open Modal when I press the FABs button
</ScrollView>
</View>
)
);
_renderModal = () => {
return (
<CameraImageSelectModal
hideModal={this._hideModal}
isModalVisible={this.state.isModalVisible}
navigation={this.props.navigation}
/>
)
}
这是模态组件：CameraImageSelectModal.js
render() {
let { isModalVisible } = this.props;
return (
<View>
<Modal
isVisible={isModalVisible}
onBackdropPress={() => {console.log('hey')}}>
transparent={true}>
<View style={styles.modalContainer}>
<View style={styles.modalTitleTextContainer}> …我使用react和react-modal在网站上创建覆盖图。此叠加层包含各种元素以及一个表单（下面的概述）。我希望能够使用TAB键引导用户完成表单。我tabindex=0将必需的元素分配为可出现的顺序。
我的问题是：它不能在Chrome（版本61.0.3163.100）中工作，而可以在Firefox中工作。我读到，如果DOM树上的任何元素不可见或高度/宽度为0，就会发生这种情况。我进行了一些样式更改以解决此问题，但没有任何效果。
<div class="ReactModalPortal">
<div data-reactroot="" class="ReactModal__Overlay" style="position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px;">
<div class="ReactModal__Content" tabindex="-1" aria-label="Questionnaire" style="position: absolute; top: 0px; left: 0px; right: 0px; height: 100%; background: transparent none repeat scroll 0% 0%; overflow: auto;">
<!-- Some other stuff and nested elements -->
<div id="...">
<form>
<input tabindex="0">
<button tabindex="0">
</form>
</div>
</div>
</div>
如您所见，父元素之一具有tabindex="-1"。通过Chrome中的inspect函数或使用JS编程更改它时，问题仍然存在（或者如果元素最初是使用此索引呈现的，这是否有所不同？）。
更新资料
我意识到是其他原因导致了问题。我在initial: all模态的根节点上使用CSS属性，以将内部CSS与外界隔离。由于某种原因，这使tabindex无法正常工作。如果您能帮助我理解，我将为您提供赏金。我的解决方法是不使用all: initial（无论如何它都不兼容IE，但是我也没有真正好的替代方法）。
我使用react-responsive-modal 在我的 react 应用程序中打开一些模态。当我打开模态时，有一个叠加效果使模态后面的背景变暗。有没有办法使背景变暗 100% 或为背景设置任何颜色，这样我就看不到打开模态之前存在的东西，直到我再次关闭模态？
我ModalComponent在 my 中为模态创建了一个新组件，MainComponent当我单击按钮时会呈现该组件：
ModalComponent：
render() {
return (
<div className="childDiv">
<Modal
open={open}
onClose={this.onCloseModal}
center
classNames={{
transitionEnter: styles.transitionEnter,
transitionEnterActive: styles.transitionEnterActive,
transitionExit: styles.transitionExitActive,
transitionExitActive: styles.transitionExitActive
}}
animationDuration={1000}
>
...
主要组件：
<div>
<div className="outter" onClick={this.openModal.bind(this)}>
//Open Modal when clicking on this div
<p className="arrival">Ankunft am Ziel: ~ {this.props.arrival} Uhr</p>
<p className="price">max. {this.props.price} €</p>
{this.state.open && (
<BookingModalNew
open={this.state.open}
triggerCloseModal={this.closeModal.bind(this)}
destination={this.props.destination}
arrival={this.props.arrival}
price={this.props.price}
/>
)}
//Whole Stuff should not be visible while …react-modal ×10
reactjs ×9
javascript ×3
react-native ×3
crud ×1
css ×1
enzyme ×1
jsx ×1
modal-dialog ×1
react-table ×1
reactstrap ×1
tabindex ×1