[英]How can I pass a DOM element to an HTML attribute? ReactJs/ Javascript
I have to pass react element to html attribute:我必须将 react 元素传递给 html 属性:
let element = (
<div>
<div> test</div>
<div> <span> test333</span></div>
</div>
)
<div data-react = {element}></div>
However I get "object Object"
inside the data-react attribute, is there a way I could use a method to pass dom element and use that inside my render function?但是我在 data-react 属性中得到了
"object Object"
,有没有办法可以使用一种方法来传递 dom 元素并在我的渲染函数中使用它?
This is the expected o/p I'm trying to get to render it as a react element:这是我试图将其呈现为反应元素的预期 o/p:
UPDATE::::::::: So here is what I have tried:更新::::::::: 所以这是我尝试过的:
I want to show a tooltip that has HTML content, however data-tip accepts only "string" and not html.我想显示一个包含 HTML 内容的工具提示,但是数据提示只接受“字符串”而不是 html。 Hence now im using react component to show the tooltip content.
因此现在我使用 react 组件来显示工具提示内容。
Now I want to pass the tooltip content to my react component that I'll use to show the tooltip, but for that I need to find a way to pass the content defined:现在我想将工具提示内容传递给我将用来显示工具提示的 react 组件,但为此我需要找到一种方法来传递定义的内容:
let element = (
<div>
<div> test</div>
<div> <span> test333</span></div>
</div>
)
<div data-react = {element}></div>
hence I used: <div data-tip = {ReactDOMServer.renderToString(elements)}></div>
因此我使用了:
<div data-tip = {ReactDOMServer.renderToString(elements)}></div>
with this in my tooltip component <Tooltip> const tipvalue = e.target.getAttribute("data-tip")
;在我的工具提示组件中使用这个
<Tooltip> const tipvalue = e.target.getAttribute("data-tip")
;
I get data-tip
value as a string, now I want to pass this to my react component to render the html.我将
data-tip
值作为字符串获取,现在我想将其传递给我的 react 组件以呈现 html。
<Tooltip>
<ReactTooltip content = {tipvalue}/>
</Tooltip>
export default class ReactToolTip extends PureComponent {
render() {
const doc = new DOMParser().parseFromString(this.props.content, "application/xml");
const htmlSections = doc;
return (
{htmlSections}
);
}
}
not sure how to render it in the component after this?不确定在此之后如何在组件中呈现它? any ideass???
有什么想法???
If that didn't work, you should try making a component out of it and then you can pass the props of the father component to it.如果这不起作用,您应该尝试用它制作一个组件,然后您可以将父组件的 props 传递给它。
function Element() {
return (
<div>
<div>test</div>
<div><span>test333</span></div>
</div>
)
}
<Element />
I hope this example will be helpful.我希望这个例子会有所帮助。 Probably if you are getting
example
variable from other context, it is better to use var
or const
variable declaration可能如果您从其他上下文获取
example
变量,最好使用var
或const
变量声明
import React, { Component } from 'react';
var element = (
<div>
<div> test</div>
<div> <span> test333</span></div>
</div>
);
class App extends Component {
render() {
return (
<div className="App">
{element}
</div>
);
}
}
export default App;
You unfortunately can't do this.不幸的是,您不能这样做。 Even if React look like HTML, they're not working the same.
即使 React 看起来像 HTML,它们的工作方式也不一样。 Your data-react attribute can only contains string.
您的 data-react 属性只能包含字符串。
Since react only keep string
or number
attributes in the DOM, you can only convert them to string to keep it there:由于 react 仅在 DOM 中保留
string
或number
属性,因此您只能将它们转换为字符串以将其保留在那里:
<div data-react={String(element)}>
I don't know how are you going to use that elsewhere, but honestly why you would ever need that ?我不知道你将如何在其他地方使用它,但老实说你为什么需要它? :) I suggest think about Ref s
:) 我建议考虑Ref s
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.