英文:
What is the equivalent in React of jQuery(text).find('[data-char]')?
问题
我正在尝试将 Angular/jQuery 项目迁移到 React，但我不知道如何找到与以下代码等效的内容：
var text = "<p><span class=\"mention\" data-index=\"1\" data-char=\"@\" data-id=\"00000000-0000-0000-0000-0000-00000000000000\" data-value=\"Jhon Doe\" data-target=\"jhon.doe@gmail.com\"><span class=\"ql-mention-char\">@</span>Jhon Doe</span> </p><p><br></p><p>azeaz </p><p>azeazea</p><p>zeaze</p><span class=\"mention\" data-index=\"1\" data-char=\"@\" data-id=\"00100000-0010-0100-0100-0001-10000100000001\" data-value=\"Jhonny Tommy\" data-target=\"jhonny.tommy@gmail.com\"><span class=\"ql-mention-char\">@</span>Jhonny Tommy</span>";
jQuery().find('[data-char]')
至少我想要做的是在表格中获取所有的 data-id。
英文:
I'm trying to migrate angular/jquery project to React but I don't know how can I have an equivalent to
var text = "<p><span class="mention" data-index="1" data-char="@" data-id="00000000-0000-0000-0000-0000-00000000000000" data-value="Jhon Doe" data-target="jhon.doe@gmail.com"><span class="ql-mention-char">@</span>Jhon Doe</span> </p><p><br></p><p>azeaz </p><p>azeazea</p><p>zeaze</p>
<span class="mention" data-index="1" data-char="@" data-id="00100000-0010-0100-0100-0001-10000100000001" data-value="Jhonny Tommy" data-target="jhonny.tommy@gmail.com"><span class="ql-mention-char">@</span>Jhonny Tommy</span>"
jQuery().find('[data-char]')
at least what i want to do is get all data-id in a table
答案1
得分: 0
在React中，我们通常倾向于将数据存储在组件的状态中，并根据该状态渲染UI。我们试图避免直接操作DOM，这是jQuery通常做的事情。
我们可以使用DOMParser将HTML字符串解析为文档。然后使用querySelectorAll选择所有具有data-char属性的元素。
在获取到元素之后，我们可以将它们转换为数组，遍历元素，并提取每个元素的data-id。然后使用setIds将这些id设置到useState中，并进行渲染。
尝试这个 -->
import React, { useEffect, useState } from "react";
function YourComponent() {
const [ids, setIds] = useState([]);
const htmlText = `...`; // 你的HTML字符串在这里
useEffect(() => {
const parser = new DOMParser();
const htmlDoc = parser.parseFromString(htmlText, 'text/html');
const mentions = htmlDoc.querySelectorAll('[data-char]');
const dataIds = Array.from(mentions).map(mention => mention.dataset.id);
setIds(dataIds);
}, []);
return (
<div>
{ids.map((id, index) => <p key={index}>{id}</p>)}
</div>
);
}
export default YourComponent;
英文:
In React, we usually prefer to store data in the state of the component and render the UI based on that state. We try to avoid direct DOM manipulations that jQuery usually does.
We can use DOMParser to parse the HTML string into a Document. Then using querySelectorAll we can select all the elements with a data-char attribute.
After getting the elements, we can convert them to an array, map over the elements, and extract the data-id for each element. The ids are then set into a useState with setIds and rendered.
Try this one -->
import React, { useEffect, useState } from "react";
function YourComponent() {
const [ids, setIds] = useState([]);
const htmlText = `<p><span class="mention" data-index="1" data-char="@" data-id="00000000-0000-0000-0000-0000-00000000000000" data-value="Jhon Doe" data-target="jhon.doe@gmail.com"><span class="ql-mention-char">@</span>Jhon Doe</span> </p><p><br></p><p>azeaz </p><p>azeazea</p><p>zeaze</p>
<span class="mention" data-index="1" data-char="@" data-id="00100000-0010-0100-0100-0001-10000100000001" data-value="Jhonny Tommy" data-target="jhonny.tommy@gmail.com"><span class="ql-mention-char">@</span>Jhonny Tommy</span>`;
useEffect(() => {
const parser = new DOMParser();
const htmlDoc = parser.parseFromString(htmlText, 'text/html');
const mentions = htmlDoc.querySelectorAll('[data-char]');
const dataIds = Array.from(mentions).map(mention => mention.dataset.id);
setIds(dataIds);
}, []);
return (
<div>
{ids.map((id, index) => <p key={index}>{id}</p>)}
</div>
);
}
export default YourComponent;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论