Astro组件Prop中如何插入换行符？

Astro默认会对插值的文本进行转义，所以直接传入<br>标签会被当作纯文本显示，无法解析成换行。以下是三种可行的解决方式：

1. 使用 setHTML 渲染原始HTML #

Astro提供了setHTML工具来直接渲染包含HTML标签的字符串，需要先导入该工具，再包裹prop内容：

组件代码修改：

---
import { setHTML } from 'astro:html';
const { image, name, professionalTitle } = Astro.props;
---
<div class="c-person__name">
  {name ? setHTML(name) : ''}
</div>

引用组件时保持原写法即可：

<Person
  image="images/image-1.jpg"
  name="Some Titel <br> should go here"
  professionalTitle="Some text"
/>

注意：如果name的内容来自用户输入，使用setHTML存在XSS风险，这种场景不推荐使用该方案。

2. 将名称拆分为多个props #

如果换行位置固定，把名称拆成独立的props是更安全可控的方式：

组件代码修改：

---
const { image, firstName, lastName, professionalTitle } = Astro.props;
---
<div class="c-person__name">
  {firstName}<br>{lastName}
</div>

引用组件时分别传值：

<Person
  image="images/image-1.jpg"
  firstName="Some Titel"
  lastName="should go here"
  professionalTitle="Some text"
/>

3. 纯文本换行 + CSS控制显示 #

如果不想用HTML标签，可以在prop里用换行符（\n），再通过CSS让文本自动识别换行：

组件代码修改（添加CSS样式）：

---
const { image, name, professionalTitle } = Astro.props;
---
<div class="c-person__name" style="white-space: pre-line;">
  {name}
</div>

引用组件时传入带换行的字符串：

<Person
  image="images/image-1.jpg"
  name="Some Titel
should go here"
  professionalTitle="Some text"
/>

或者用转义的换行符写法：

<Person
  image="images/image-1.jpg"
  name="Some Titel\nshould go here"
  professionalTitle="Some text"
/>

内容的提问来源于stack exchange，提问作者didierCH