如何将变量与组件连接为单个变量并传递给另一个组件[重复]答案

【问题标题】：How to concat variables with component as single variable and pass into another component [duplicate]如何将变量与组件连接为单个变量并传递给另一个组件[重复]
【发布时间】：2019-09-11 01:36:02
【问题描述】：

我有这些小代码

const myvar = `Some text, ${(
  <Link href={'#'}>this is link</Link>
)}`;

我将它传递给一个组件。渲染时会显示：

Some text, [object, object]

将变量与组件连接并传递给另一个组件的正确方法是什么？

【问题讨论】：

这不是文本...
如果你想将与一个字符串连接，你必须先将它呈现为一个字符串，试试ReactDOMServer.renderToStaticMarkup(element)

标签： javascript reactjs

【解决方案1】：

您尝试的解决方案呈现为Some text, [object, object] 的原因是当您在模板字符串中嵌入对象时。如果表达式是一个对象，则使用模板字面量类似于渲染对象的toString() 方法，如您所见，它将返回[object, object]。您将 React 元素插入到模板文字中，这是一个对象。

要传递它，您可以尝试删除引号并将其作为单个 React 元素道具传递，正如本网站上其他答案中所建议的那样，如下所示：

<ComponentYouArePassingTo linkComponent={
    <React.Fragment>
        Some text,
        <Link href={'#'}>this is link</Link>
    </React.Fragment>
}/>

【讨论】：

【解决方案2】：

您可以按如下方式制作myvar JSX，它应该在您传递给它的组件中正确呈现：

const myvar = (
  <React.Fragment>
    Some text,{" "}
    <Link href={'#'}>this is link</Link>
  </React.Fragment>
)

【讨论】：

问题是如何将它传递给另一个组件。