如何在我的ModalBodContent
反应组件中添加换行符?
<ModalMain
ModalBodyContent={`New account created. Enrolment email sent. \n\n Name: ${firstName} ${lastName} \n email: ${email}`}
/>
2种方式:
你可以在你的dangerouslySetInnerHTML里面使用<ModalMain/>
function render() {
return <div dangerouslySetInnerHTML={{__html: `New account created. Enrolment email sent. \n\n Name: ${firstName} ${lastName} \n email: ${email}`}} />;
}
或者您可以将ModalBodyContent
作为元素传递,并相应地渲染它:
<ModalMain
ModalBodyContent={
<div>
New account created. Enrolment email sent.
<br/><br/>
Name: {firstName} {lastName}
<br/>
email: {email}
</div>
}
/>
也可以这样做:
<ModalMain>
<div>
New account created. Enrolment email sent.
<br/><br/>
Name: {firstName} {lastName}
<br/>
email: {email}
</div>
</ModalMain>
你的代码完全打破了字符串行,但你需要在HTML元素中使用CSS样式white-space: pre-wrap;
,在那里渲染该字符串行。
这取决于你期望传递给ModalBodyContent
的东西。
如果你使用这个道具作为一个字符串,那么,你可以做的很好。但是如果你把它用作React.ReactNode
,那么你不仅可以传递一个字符串,还可以传递任何JSX,包括例如React.Fragment
:
<ModalMain
ModalBodyContent={(
<React.Fragment>
New account created. Enrolment email sent.
<br/>
<br/>
{`Name: ${firstName} ${lastName}`}
<br/>
{`email: ${email}`}
</React.Fragment>
/>
要以这种方式使用组件,ModalMain
的内部应该是这样的:
render() {
return (
// some complex jsx, possibly...
{this.props.ModalContent}
// anything else...;
)
}