React 组件未渲染并返回 [object Object]

【问题标题】：React Component is not rendering and returns [object Object]React 组件未渲染并返回 [object Object]
【发布时间】：2022-01-25 15:36:07
【问题描述】：

我必须准备一个静态 HTML，并在其中渲染一个反应链接。但它没有按预期工作并返回 [object Object]。这是我的代码。

 const htmlCode =    `<div class='info-container'>
                          <div class='heading-section'>
                              ${<><Link to = {targetURL}>Click Here</Link></>}
                          </div>
                      <div>`

渲染后得到的输出：

我已经对此进行了安慰，并在控制台上获得了如下所示的输出：

----------------------编辑---------- --------------------------

这里的主要目标是，我想将此静态 HTML（变量 htmlCode）传递给另一个组件，这不是渲染，但我得到的是对象而不是渲染，如此处附加的控制台输出所示。有什么方法可以在传递给其他组件之前渲染它并将其转换为一种静态 HTML？

【问题讨论】：

标签： javascript reactjs react-component template-literals

【解决方案1】：

JSX 不是 HTML，它是 HTML 的语法糖。你不能将它包裹在字符串周围。它将转译为React.createElement，后者返回一个 JavaScript 对象。

const htmlCode = <div class='info-container'>
                     <div class='heading-section'>
                         <Link to = {targetURL}>Click Here</Link>
                      </div>
                  <div>

查看更多Rendering JSX elements

【讨论】：

试过这个解决方案，[object Object] 被移除并在那里得到正确的字符串，但是 Link 还没有按预期呈现，请在此处查看呈现的 Link 组件link
Link, 是来自 react-router-dom 吗？
是的，它来自 react-router-dom
截图看起来你用link而不是Link，来自路由器的Link会渲染一个<a>标签
你也可以用<a href={targetURL}>Click Here</a>替换Link