英文:
I want to practice the usage of <dialog> tag inside the react environment. So I want to covert this HTML code into React code
问题
这里我只使用HTML。如果在HTML中使用<dialog>标签，它有一堆内置方法。其中一些在此处使用。但是，如果我在React环境中使用modal.Show()和modal.Close()方法等，它会给我错误。所以有人可以帮我将这个HTML代码转换成React代码吗？我需要保留所有属性和属性不变。
英文:
Here I use HTML only. If I use the <dialog> tag in HTML, It has a bunch of inbuild methods. Some of them are used here. But If I use modal.Show() and modal.Close() methods and more inside the React environment, It gives me errors.So Can anyone help me to convert this HTML code into react code? I need to keep all properties and attributes as it is.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="test.css" />
<style>
dialog::backdrop {
background-color: rgb(108, 113, 111);
}
</style>
</head>
<body>
<h1>This is H1 Tag</h1>
<button data-open-modal>Open me</button>
<dialog data-modal>
<p close-modal>X</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat ipsa
quod ipsum numquam officia, eveniet deleniti aspernatur quo accusamus
distinctio eligendi necessitatibus commodi ipsam! Doloremque quod hic
odio placeat aliquid. Ipsam esse cumque fugiat optio inventore, eligendi
ex tempora ad adipisci accusamus exercitationem ratione itaque sapiente.
Eveniet pariatur iusto rem soluta tenetur nemo enim qui adipisci
dolorem? Ullam, quibusdam neque. Nisi necessitatibus repellat
<button data-close-modal>Close me</button>
</p>
<form>
<input type="text" />
<button type="submit" formmethod="dialog">Close me</button>
<button type="submit">Submit me</button>
</form>
</dialog>
<script>
const openButton = document.querySelector("[data-open-modal]");
const closeButton = document.querySelector("[data-close-modal]");
const modal = document.querySelector("[data-modal]");
openButton.addEventListener("click", () => {
modal.showModal();
});
closeButton.addEventListener("click", () => {
modal.close();
});
</script>
</body>
</html>
答案1
得分: 1
生成整个React应用程序环境，建议使用next.js，它使用React，非常简单和完整。
按照逐步教程操作：https://nextjs.org/docs
或者查看React推荐的其他框架：https://react.dev/learn/start-a-new-react-project#production-grade-react-frameworks
祝好运！
英文:
You need to generate the entire react application environment, I would recommend to use next.js which uses react, super easy and complete.
Follow the step by step tutorial: https://nextjs.org/docs
Or see another frameworks also recommended by react: https://react.dev/learn/start-a-new-react-project#production-grade-react-frameworks
Good luck!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论