Question

当用户单击链接时，我试图显示模态分量。

handleShow fn在单击锚标记时被调用，这会调用ReactDom.render以显示模式。

handleShow() {
    ReactDOM.render(<WaiverModal />, document.getElementById("modal"));
  }

我可以看到模式第一次工作，但是第二次却没有弹出。

Answer 1

这是React中有条件渲染的一种情况。无需使onClick函数调用ReactDOM.render，只需在props中声明一个布尔值 isClicked 并将其传递给该onclick函数即可。然后使用JSX语法根据您的点击显示该组件。

例如

isClicked = false;

<a onClick={!isClicked}></a>


<div>
{ this.props.isClicked && <WaiverModal />  }
</div>

Answer 2

我认为发生这种情况是因为您尝试第二次渲染已经相同的组件。您如何“释放”弹出窗口？ -这是问题。

因此，如何解决此问题-创建一个“模式容器”，并始终在应用程序启动时将其呈现在页面的某个位置。

import React from "react";
import ReactDOM from "react-dom";
import App from "./component/App";
import ModalContainer from "./component/ModalContainer";
import "./index.css";

ReactDOM.render(<App />, document.getElementById("root"));
ReactDOM.render(<ModalContainer />, document.getElementById("modal"));

然后，当您要渲染一些模态-调用函数并将模态组件传递给它时。

showModal(component) {
    dispatch({ type: APPEND_MODAL, component }),
}

然后，此函数会将组件发送到某些存储设备（例如，redux）

import { APPEND_MODAL, HIDE_MODAL } from '../constants/actionTypes';

export default (state = [], action) => {
  switch (action.type) {
    case APPEND_MODAL:
      return [
        ...state,
        action.component
      ];
    case HIDE_MODAL:
      return state.slice(0, -1); // Get all exept last
    default:
      return state;
  }
};

，然后您的“模态容器”将拾取此组件并将其呈现在内部。

class ModalConainer extends React.Component {
  render() {
  // modals comes from redux - connect ModalContainer to redux store and pass the modals pr
    return this.props.modals.map((component, idx) => (
      <div key={idx}>{component}</div>
    );
  }
}

但是，可以肯定，您可以找到更简单的方法来做到这一点。由你决定。祝你好运。

ReactDom.render没有第二次渲染模态组件

2 个答案: