时间戳

首页 > 解决方案 > 如何在不实际编辑 HTML 元素的情况下添加属性

javascript - 如何在不实际编辑 HTML 元素的情况下添加属性

问题描述

我在 REACT 中创建了一个下面的 HTML 组件，我无法直接对其进行编辑。但我需要将一个属性添加到它的 HTML 元素之一。我也不能使用 jquery，否则它很容易使用 jQuery。

下面是我无法直接编辑的表格的基本 HTML，但我可以在我的代码中使用这个组件。

挑战：我需要为 SVG 元素添加属性。例如 -> 数据 ID =“1”。它可以用CSS或任何其他方式完成。

<TablePresenter>
<div>
   <svg>this is a actually a sort button</svg> 
   <div>Column 1 Name</div>
</div>
<div>
   <svg>this is a actually a sort button</svg> 
   <div>Column 2 Name</div>
</div>
</TablePresenter>

我可以编辑的主文件如下。

const MyComponent = () => {
some logic here...
Can we do something here may be CSS or any react hack to get underline component HTML change.
return(
  <TablePresenter></TablePresenter>
) 
}

export default MyComponent;

标签： javascripthtmlcssreactjs

解决方案

不是推荐的做法，但使用 ref 可以实现这一点，示例如下：

像下面一样将包装器 div 添加到您的父组件（您自己的可以编辑的组件）并添加一个ref，这将帮助您获取 html 内部的 DOM 引用<TablePresenter>

const divRef= useRef<HTMLDivElement>(null);

return <div ref={divRef}>
    <TablePresenter></TablePresenter>
</div>

// This is an example of getting the reference of the svg.
divRef.current.firstElementChild.firstElementChild.firstElementChild

可能是这样的：

const MyComponent = () => {
    const divRef = useRef<HTMLDivElement>(null);
    useEffect(()=>{
        divRef.current.firstElementChild.firstElementChild.firstElementChild.attributes["data-id"]=1
    }, [])

    return <div ref={divRef}>
         <TablePresenter></TablePresenter>
        <SuperChild />
    </div>
}

推荐阅读