标签: react-modal

如何使用react-modal包在React应用程序的控制台中修复此警​​告:

警告:react-modal:未定义App元素.请使用Modal.setAppElement(el)或设置appElement={el}

我没有成功地弄清楚el应该是什么.

上下文:在我的App.js根组件文件中:

...
import Modal from 'react-modal';
...
class App extends Component {
  ...
  render(){
    ...  
    <Modal
      className="modal"
      overlayClassName="overlay"
      isOpen={foodModalOpen}
      onRequestClose={this.closeFoodModal}
      contentLabel="Modal"
    >
    ...
  }
}

其中...表示代码未显示.

一切正常,但是当打开模态时,我的控制台中会出现以下警告:

index.js:2177警告:react-modal:未定义App元素.请使用Modal.setAppElement(el)或设置appElement={el}.这是必需的,因此屏幕阅读器在打开模态时看不到主要内容.不建议这样做,但您可以通过设置选择退出ariaHideApp={false}.

在react-modal文档中,我可以找到以下内容:

应用程序元素应用程序元素允许您指定应隐藏的应用程序部分(通过aria-hidden),以防止屏幕阅读器等辅助技术读取模态内容之外的内容.

如果您正在进行服务器端呈现,则应使用此属性.

它可以通过以下方式指定:

一个DOMElement
Modal.setAppElement(appElement);
query selector - uses the first element found if you pass in a class.
Modal.setAppElement('#your-app-element');

不幸的是,这没有帮助!我无法弄清楚el应该代表什么.

以下是我尝试添加到我的Modal组件中的一些属性变体:

`appElement={el}`,  
`appElement="root"` where `root` is the id that my …

如果用户不采取任何措施,我需要在13分钟不活动后显示超时警告模式,并在15分钟后结束会话.我需要使用reactjs来实现这一点.我在https://www.npmjs.com/package/react-timeout#react-classic-verbose检查了react-timeout ,但这没有帮助.如果有人知道如何做到这一点,请与我分享.

我正在使用这个react模式插件:https://github.com/reactjs/react-modal 我需要在页面加载模式中显示一个对象数组.当第一项显示用户单击按钮时,isOpen prop对于Modal设置为false.每个项目都有一个prop showModal,它将值提供给模态的isOpen.当用户不断点击时,我会继续将当前对象上的值设置为false,然后将其设置为true以用于下一个对象.这一切都很好,但问题是叠加和对话窗口停留在屏幕上,只更新模态中的内容.我希望模态完全关闭并打开以显示数组中下一个对象的内容.我不得不将我的代码删除到下面的简化版本:

class ProductsModal extends React.Component {
  constructor(props) {
    super(props);
    this.remindMeHandler = this.remindMeHandler.bind(this);

    this.state = {
      products: [],
      modalId: 0
    };
  }

showModals() {
    let products = this.state.products;
    //A different function saves the array of product objects in the state so 
    //I can show them one by one

    let currentProduct = products[this.state.popUpId];

    if (products.length > 0) {
      return <ProductItemModal 
              product={currentProduct}
              showNextPopUp={() => this.showNextPopUp(currentProduct.productId)}
              showPopUp={currentProduct['showModal']}
              />;
    //showModal is a boolean for each product that sets the …

我的网络应用程序中有一个模态，当用户单击“打开”按钮时，我想将其滑入。我正在使用react-transition-group来实现这一点。但我无法让动画工作。不知道这里有什么问题？

import React from 'react';
import ReactDOM from 'react-dom';
import { CSSTransition } from 'react-transition-group';
import Modal from 'react-modal';

import './styles.css';

class Example extends React.Component {
  state = {
    isOpen: false,
  };

  toggleModal = () => {
    this.setState(prevState => ({
      isOpen: !prevState.isOpen,
    }));
  };
  render() {
    const modalStyles = {
      overlay: {
        backgroundColor: '#ffffff',
      },
    };
    return (
      <div>
        <button onClick={this.toggleModal}>
          Open Modal
        </button>
        <CSSTransition
          in={this.state.isOpen}
          timeout={300}
          classNames="dialog"
        >
          <Modal
            isOpen={this.state.isOpen}
            style={modalStyles}
          >
            <button onClick={this.toggleModal}>
              Close Modal
            </button> …

我使用的反应模式非常棒.是否可以动态调整它(可能使用css media标签).例如,

1. 对于大屏幕,模态只占用屏幕的一小部分(比如说最大宽度为200px;
2. 对于中等屏幕,模态占据屏幕的大部分(让我们说屏幕宽度和高度的80%
3. 对于移动设备,它占用了宽度和高度的100%.

我有一个反应组件，比方说：app.js（父组件），它有一个子组件，它呈现反应引导模式组件。父组件使用 React hook 从 redux 获取数据，如下所示：

  useEffect(() => { props.dispatch(actions.loadAll());},[]);

然后数据被传递以显示在我的模态组件中。我正在使用“show”和“onShow”状态处理模式可见性。无论如何，我可以避免在父组件中加载数据，并且仅在模态组件加载并显示数据之后才加载吗？任何建议，将不胜感激。

我正在尝试使用 React 测试库和 findByRole 来测试我的模式是否存在。我不断收到一条错误消息：Unable to find role="dialog"尽管我可以清楚地看到它在测试控制台中打印出来。

这是我的测试：

import React from "react";\nimport {\n    render,\n    screen,\n    within,\n    fireEvent, cleanup, waitFor\n} from \'@testing-library/react\';\nimport \'@testing-library/jest-dom\';\nimport "@testing-library/react/dont-cleanup-after-each";\nimport Modal from \'react-modal\';\n\nimport PackagerModal from \'./PackagerModal\';\n\nconst mockedEmptyFn = jest.fn();\n\nconst mockBaseProps = {\n    openPackager: true,\n    setOpenPackager: mockedEmptyFn,\n    activeOrder: {\n        // ... // lots of irrelevant properties here\n        ]\n    },\n    setOrders: mockedEmptyFn,\n    customStyles: {\n        content: {\n            backgroundColor: "var(--color-primary)",\n            border: "1px solid #ccc",\n            boxShadow: "-2rem 2rem 2rem rgba(0, 0, 0, 0.5)",\n            color: "rgba(var(--RGB-text), 0.8)",\n            filter: …

我对 React 和一般编码都很陌生。我试图在同一组件中渲染多个模态，但它们都是同时渲染的，因此看起来所有链接都在最后一个模态中渲染文本。
这是状态设置的地方：

class Header extends React.Component {
  constructor () {
    super();
    this.state = {open:false}
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
    this.handleModalChangeEnter = this.handleModalChange.bind(this, true);
    this.handleModalChangeLogin = this.handleModalChange.bind(this, false);
  }
  openModal () {
    this.setState({open: true}); }
  closeModal () {
    this.setState({open: false}); }
  render() {

这是模态结构：

return (
    <header style={home}>

    <div style={hello}>
      <img style={logo} src='public/ycHEAD.png'/>
      <p style={slogan}>One Calendar for All of Yerevan's Tech Events</p>
    </div>

    <div style={subContainer}>
      <ul style={modalDirectory}>

        <Button onClick={this.openModal}
                style={openButton}>
          <li><a style={tabs}>Enter
              </a></li>
        </button>
        <Modal style={modalCont}
               isOpen={this.state.open}>
              <button …

此问题与#issue 191有关:打开模态时不要滚动父组件

现在这个问题发生在iOS上.因为后面的父母正在滚动.模态有时似乎没有反应.我按照建议使用onAfterOpen回调,如下所示:

<Modal
      isOpen={open}
      onRequestClose={this.handleCloseModal}
      style={styles.modal}
      contentLabel="Example Modal"
      onAfterOpen={this.disableScroll}
>

在同一个父级中,我定义了disableScroll:

disableScroll = () => {
   document.body.style.overflow = 'hidden'
}

我也遵循ios的css指南:

parent: {
  overflow: 'hidden',
  position: 'absolute',
  width: '100%',
  height: '100%'},

太糟糕了,当模态关闭时,这会停止父视图的滚动.知道如何在ios上解决这个问题吗？

我的问题

我使用方法渲染简单项目（数字或字符串）的列表Array.map。我用来Modal添加/更新项目。但是，每次打开或关闭模式都会react重新渲染整个数组，即使数组保持不变。我觉得这是一种预期的行为。

问题

1. 打开或关闭模式时是否可以不重新渲染整个组件？
2. 在数组中添加/更新新项目而不重新渲染整个列表的常见方法是什么？

多谢你们

最小代码示例

/* 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
 * …