如何使用 React 和 Tailwind CSS 插入脚本？答案

【问题标题】：How can I do to insert a script using React and Tailwind CSS?如何使用 React 和 Tailwind CSS 插入脚本？
【发布时间】：2023-04-07 23:53:01
【问题描述】：

我正在开发一个使用 React 和 Tailwind CSS 的项目，我想实现一个模态，但我有一些问题要做。这是我使用顺风和反应的模态代码：

import React from "react";
import "./styles.css";
import "./styles/tailwind-pre-build.css";
import Navbar from "./components/Navbar";
import LivePortal from "./components/LivePortal";
import WorkContainer from "./components/WorkContainer";
import HomePage from "./components/Homepage";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

const App = () => {
  return(
    <>
<div class="p-3">
    <button onclick="openModal(true)" class="bg-green-500 hover:bg-green-600 px-4 py-2 rounded text-white focus:outline-none">
        Open Modal
    </button>
</div>

<div id="modal_overlay" class="hidden absolute inset-0 bg-black bg-opacity-30 h-screen w-full flex justify-center items-start md:items-center pt-10 md:pt-0">

<div id="modal" class="pacity-0 transform -translate-y-full scale-150  relative w-10/12 md:w-1/2 h-1/2 md:h-3/4 bg-white rounded shadow-lg transition-opacity transition-transform duration-300">

    <button 
    onclick="openModal(false)"
    class="absolute -top-3 -right-3 bg-red-500 hover:bg-red-600 text-2xl w-10 h-10 rounded-full focus:outline-none text-white">
    &cross;
    </button>

    <div class="px-4 py-3 border-b border-gray-200">
    <h2 class="text-xl font-semibold text-gray-600">Title</h2>
    </div>

    <div class="w-full p-3">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores, quis tempora! Similique, explicabo quaerat maxime corrupti tenetur blanditiis voluptas molestias totam? Quaerat laboriosam suscipit repellat aliquam blanditiis eum quos nihil.
    </div>

    <div class="absolute bottom-0 left-0 px-4 py-3 border-t border-gray-200 w-full flex justify-end items-center gap-3">
    <button class="bg-green-500 hover:bg-green-600 px-4 py-2 rounded text-white focus:outline-none">Save</button>
    <button 
        onclick="openModal(false)"
        class="bg-red-500 hover:bg-red-600 px-4 py-2 rounded text-white focus:outline-none"
    >Close</button>
    </div>
</div>

</div>


</>
  );
}

export default App;

我想使用下面的脚本来打开和关闭模式，但我不知道该怎么做。请问你能帮帮我吗？非常感谢

<script>
const modal_overlay = document.querySelector('#modal_overlay');
const modal = document.querySelector('#modal');

function openModal (value){
    const modalCl = modal.classList
    const overlayCl = modal_overlay

    if(value){
    overlayCl.classList.remove('hidden')
    setTimeout(() => {
        modalCl.remove('opacity-0')
        modalCl.remove('-translate-y-full')
        modalCl.remove('scale-150')
    }, 100);
    } else {
    modalCl.add('-translate-y-full')
    setTimeout(() => {
        modalCl.add('opacity-0')
        modalCl.add('scale-150')
    }, 100);
    setTimeout(() => overlayCl.classList.add('hidden'), 300);
    }
}
openModal(true)
</script>

您可以在此处获取不带脚本标签的代码：https://codesandbox.io/s/tailwind-css-and-react-forked-6funy?file=/src/App.js

【问题讨论】：

标签： javascript reactjs modal-dialog tailwind-css

【解决方案1】：

所以我不打算为你编写代码，因为我认为从长远来看这对你没有好处。但是你需要制作一个模态组件。我还建议您阅读有关 React 中的状态的内容。我会发布一个链接供您查看。阅读后，您应该对在 React 中实现 Modal 需要做什么有更好的理解。

我强烈建议您搜索网络并学习命令式编程与声明式编程、useState 和 useEffect 挂钩。

https://reactjs.org/docs/hooks-intro.html

【讨论】：