添加换行符javascript

问题描述 投票:2回答:3

如何在我的ModalBodContent反应组件中添加换行符?

<ModalMain
  ModalBodyContent={`New account created. Enrolment email sent. \n\n Name: ${firstName} ${lastName} \n email: ${email}`}
/>
reactjs
3个回答
1
投票

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>

2
投票

你的代码完全打破了字符串行,但你需要在HTML元素中使用CSS样式white-space: pre-wrap;,在那里渲染该字符串行。


1
投票

这取决于你期望传递给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...;
  )
}
© www.soinside.com 2019 - 2024. All rights reserved.