如何将DOM元素传递给HTML属性？ReactJs/Javascript

我必须将react元素传递给html属性：

let element = (
<div>
   <div> test</div>
    <div> <span> test333</span></div>
</div>
)
<div data-react = {element}></div>

因此我使用：

在我的工具提示组件中使用此选项

const tipvalue=e.target.getAttribute（“数据提示”）

我以字符串形式获取

数据提示

值，现在我想将其传递给我的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}
      );
  }
}

导出默认类工具提示扩展PureComponent{
render（）{
const doc=new DOMParser（）.parseFromString（this.props.content，“application/xml”）；
常量htmlSections=doc；
返回(
{htmlSections}
);
}
}

然而，这给了我：

不确定在此之后如何在组件中渲染它？

---

有什么想法吗？

不幸的是，你不能这样做。即使React看起来像HTML，它们的工作原理也不一样。data react属性只能包含字符串。

很遗憾，您不能这样做。即使React看起来像HTML，它们的工作原理也不一样。数据react属性只能包含字符串。

由于react只能在DOM中保留

string

或

number

属性，因此只能将它们转换为字符串以将其保留在DOM中：

<div data-react={String(element)}>

---

我不知道你将如何在其他地方使用它，但老实说，为什么你会需要它呢？：）我建议考虑s

，因为react只在DOM中保留

string

或

number

属性，所以您只能将它们转换为string以保留它们：

<div data-react={String(element)}>

---

我不知道你将如何在其他地方使用它，但老实说，为什么你会需要它呢？：）我建议考虑s

如果这不起作用，您应该尝试用它制作一个组件，然后您可以将父组件的道具传递给它

function Element() {
   return (
      <div>
          <div>test</div>
          <div><span>test333</span></div>
      </div>
   )
}
<Element />

函数元素（）{
返回(
测试
测试333
)
}

如果这不起作用，您应该尝试用它制作一个组件，然后您可以将父组件的道具传递给它

function Element() {
   return (
      <div>
          <div>test</div>
          <div><span>test333</span></div>
      </div>
   )
}
<Element />

函数元素（）{
返回(
测试
测试333
)
}

我希望这个例子会有所帮助。如果您从其他上下文中获取

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;

import React，{Component}来自'React'；
变量元素=(
测试
测试333
);
类应用程序扩展组件{
render（）{
返回(
{element}
);
}
}
导出默认应用程序；

---

我希望这个例子会有所帮助。如果您从其他上下文中获取

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;

import React，{Component}来自'React'；
变量元素=(
测试
测试333
);
类应用程序扩展组件{
render（）{
返回(
{element}
);
}
}
导出默认应用程序；

---

---

请张贴一份电子邮件。没有像console.log这样的代码或任何可以打印

“object object”

的代码。另外，您打算如何处理

数据react

？@palaѕааа：这只是一个属性，我正试图使用它来获取我的toltip中的dom元素，以便我可以使用react组件来使用此内容进行渲染。我将更新我的问题好的，也许您可以尝试查看-Refs提供了一种访问DOM节点或响应在render方法中创建的元素的方法。问题是为什么需要这样做？你想干什么？如果您能提供一些上下文信息，我们会尽力帮助您。@jperl:更新了我的问题，谢谢。请发一篇帖子。没有像console.log这样的代码或任何可以打印

“object object”

的代码。另外，您打算如何处理

数据react

？@palaѕааа：这只是一个属性，我正试图使用它来获取我的toltip中的dom元素，以便我可以使用react组件来使用此内容进行渲染。我将更新我的问题好的，也许您可以尝试查看-Refs提供了一种访问DOM节点或响应在render方法中创建的元素的方法。问题是为什么需要这样做？你想干什么？如果您能提供一些上下文，我们可以尽力帮助您。@jperl：更新了我的问题，谢谢您仍然以

object对象的形式出现，您希望输出是什么？里面的标记？@JoãoMarcello:用o/p.Thankso的屏幕截图更新了我的问题。你想将组件序列化为字符串吗？（请记住，此处只能渲染字符串）。我想JSON.stringify（组件）会以某种方式工作，但是。。。这是一个非常奇怪的behiavor，你可能没有在这里使用正确的策略。我认为你应该制作一个组件，就像我向你展示的那样，如果你想让它内部充满活力，你可以作为道具传递给。将此元素作为变量传递没有意义…它仍然显示为
object对象
您希望输出是什么？里面的标记？@JoãoMarcello:用o/p.Thankso的屏幕截图更新了我的问题。你想将组件序列化为字符串吗？（请记住，此处只能渲染字符串）。我想JSON.stringify（组件）会以某种方式工作，但是。。。这是一个非常奇怪的behiavor，你可能没有在这里使用正确的策略。我认为你应该制作一个组件，就像我向你展示的那样，如果你想让它内部充满活力，你可以作为道具传递给。将此元素作为变量传递没有意义。。。