添加换行符

你可以用 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>

您的代码完全打破了字符串行,但您需要使用CSS样式 white-space: pre-wrap;

这取决于你所期望的是什么 ModalBodyContent

如果你把这个道具当作一根弦,那么,你几乎无能为力。但如果你把它当作 React.ReactNode 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...;
  )
}