将 props 传递给 React 的无状态组件时换行字符串

Question

我有一个无状态组件，将来会将选项中的两个无状态组件分组：

const Grouped = () => {
const options = [
{
header: "Create new Lamborghini",
body:   "Generate a new Lamborghini",
button: "Generate"
},
{
header: "Get Lamborghini",
body:   "Getz it",
button: "Get it"
}
];
return (
<div>
<Option {...options[0]} />
</div>);
};
export default HomeOptionsGrouped;

选项如下所示：

const Option = ({header, body, button}) => (
<div className="option-container">
<img className="option-modal" src={OptionModal} alt="Option Modal"/>
<h5>{header}</h5>
<p className="option-body">{body}</p>
<p className="option-button">{button}</p>
</div>
);
export default Option;

我遇到的问题是我想在单词new之后换行标题说，并在单词new之后进行正文。但是当我将""添加到分组组件中的字符串时，我仍然将所有内容都放在一行上。我不想设置内部HTML并传递字符串。解决方法是什么？

Answer 1

标头值应如下所示，而不是字符串：

<span>Create new<br />Lamborghini</span>

这同样适用于身体值，如果你希望同样的效果。

Answer 2

只需将header更改为 React 元素，因为您可以将它们嵌套在<h5>中并<p>：

header: <div>Create new<br />Lamborghini</div>,