Reactjs 如何将SVG和一些标记作为React道具传递？

我有一个React按钮组件，它接受一个

text

prop，用于设置按钮的文本

这很好，但我想将文本设置为带有一些标记的SVG。如果我只通过SVG，那就行了

import { ReactComponent as IconSearch } from '../../icons/search.svg';

<Button text={<IconSearch />} />

从“../../icons/search.svg”导入{ReactComponent as IconSearch}；

一旦我添加了标记，它就会停止工作

import { ReactComponent as IconSearch } from '../../icons/search.svg';

<Button text={`${<IconSearch />} <span>Search</span>`} />

从“../../icons/search.svg”导入{ReactComponent as IconSearch}；

---

如何将SVG和一些标记作为道具传递？

将这两个元素包装为单独的组件：

const ButtonContent = () => 
    <>
        <IconSearch />
        <span>Search</span>
    </>

<Button text={<ButtonContent />} />

const按钮内容=（）=>
搜寻

当前尝试的问题是它传递了一个类似于JSX的字符串，如：

"<IconSearch /> <span>Search</span>"

“搜索”

为了传递带有文本的SVG组合，我们需要将它们包装到它们自己的组件中，并将这个新组件传递给按钮组件。下面是一个工作示例：

const SVG=（）=>(
)
常量SVGwithText=（）=>(
搜寻
)
常量按钮=（{text}）=>(
{text}
)
常量应用=（）=>(
)
ReactDOM.render（，document.getElementById（'app'））
你成功了吗？我在寻找类似于你的问题的东西