從站點復制/粘貼Reactjs-Popup示例不適用于useState-有解無憂

我正在嘗試 Reactjs-Popup 在https://react-popup.elazizi.com/controlled-popup/提供的示例代碼，但它似乎不起作用。我幾乎復制/粘貼了代碼。我錯過了什么？如果洗掉對“useState”的所有參考，我可以使彈出視窗正常作業。

索引.js

import ReactDOM from 'react-dom/client';
import './index.css';
import ControlledPopup from './ControlledPopup';

const test=ReactDOM.createRoot(document.getElementById('popup'));
test.render(ControlledPopup);

ControlledPopup.jsx

import React, { useState } from 'react';
import Popup from 'reactjs-popup';

const ControlledPopup = () => {
  const [open, setOpen] = useState(false);
  const closeModal = () => setOpen(false);
  return (
    <div>
      <button type="button" className="button" onClick={() => setOpen(o => !o)}>
        Controlled Popup
      </button>
      <Popup open={open} closeOnDocumentClick onClose={closeModal}>
        <div className="modal">
          <a className="close" onClick={closeModal}>
            &times;
          </a>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae magni
          omnis delectus nemo, maxime molestiae dolorem numquam mollitia, voluptate
          ea, accusamus excepturi deleniti ratione sapiente! Laudantium, aperiam
          doloribus. Odit, aut.
        </div>
      </Popup>
    </div>
  );
};

export default ControlledPopup;

uj5u.com熱心網友回復：

我認為您的問題來自您嘗試在index.js.
因為如果我嘗試按照我習慣的方式呈現它，那么您提供的代碼就可以作業。

我是這樣實作的：

索引.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

App.js（這里我使用你提供的組件）

import ControlledPopup from "./ControlledPopup";

export default function App() {
  return (
    <div>
      <h1>Popup Test</h1>
      <ControlledPopup />
    </div>
  );
}

查看這個playground了解整個實施程序。

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/533611.html

標籤：javascript反应反应挂钩reactjs-弹出窗口

上一篇：TypeScriptReactcreateContext()默認值

下一篇：如何通過id從一個頁面重定向到另一個頁面？