Javascript 是否可以将html添加到组件调用中？

是否可以将html添加到组件调用中

<ExpandCollapse
  previewHeight="250px"
  expandText="<span className="fal fa-arrow-down"></span>"
>

---

我尝试了几种不同的方法将

显示为图标。这在上面的代码中可能吗？

如果您以HTML形式接收此字符串，例如从API调用或第三方服务接收，则您可以仅使用在客户端中呈现它。此过程可能如下所示：

<ExpandCollapse
  previewHeight="250px"
  expandText='<span className="fal fa-arrow-down"></span>'
>

在组件中

<div dangerouslySetInnerHTML={{ __html: expandText }} />

但是，如果您自己创建字符串，那么最好将其呈现为JSX

<ExpandCollapse
  previewHeight="250px"
  expandText={<span className="fal fa-arrow-down"></span>}
>

这里，实际上是传递一个React节点，React可以在组件内部渲染

function ExpandCollapse({ expandText }) {
  return (
    <div>
      {expandText}
    </div>
  )
}

函数ExpandCollapse（{expandText}）{
返回(
{expandText}
)
}

这是因为您在

expandText

属性中传递一个字符串，而您应该传递一个react组件。 使用

作为返回值创建react功能组件，并将代码更改为

<ExpandCollapse
  previewHeight="250px"
  expandText={<NewComponent />}
>

---

您可以将其作为jsx而不是字符串传递

<ExpandCollapse
  previewHeight="250px"
  expandText={<span className="fal fa-arrow-down"></span>}
>

或者类似的

<ExpandCollapse
  previewHeight="250px"
  // This is an anti pattern though - Creates new component inside of render fn.
  expandText={() => <span className="fal fa-arrow-down" />}
>

}
>

或者把它提取出来作为一个组件，比如

const Icon = () => <span className="fal fa-arrow-down" />

<ExpandCollapse
  previewHeight="250px"
  expandText={Icon} // But this depends on how you render it in ExpandCollapse
  expandText={<Icon />} // Or this..
>

const图标=（）=>