reactjs - 在道具中使用模板文字时，如何使换行符起作用？

Question

在道具中使用模板文字时，如何使换行符起作用？

const TypographyGroup = ({label, content}) => (
  <div>
    <FadedLabel type='subheading'>
      {label}
    </FadedLabel>
    <Typography type='body1'>
      {content}
    </Typography>
  </div>
)

<TypographyGroup
  label='Address'
  content={`${profile.company.billingAddress.street_1}
    ${profile.company.billingAddress.street_2}
    ${profile.company.billingAddress.city}, ${profile.company.billingAddress.state} ${profile.company.billingAddress.zip}`}
/>

在这里，我希望在street_1and之后有一个换行符street_2，但根本没有换行符。

Answer 1

您可能会直接在<TypographyGroup>. content = {profile.company.billingAddress}作为 prop传递并添加<br/>到 render 方法中可能会更好<TypographyGroup>

更新 所以这可能是你想要的

const TypographyGroup = ({label, content}) => (
  <div>
    <FadedLabel type='subheading'>
      {label}
    </FadedLabel>
    <Typography type='body1'>
      {content.street_1}<br/>
      {content.street_1}<br/>
      {content.city} {content.state} {content.zip}
    </Typography>
  </div>
)

<TypographyGroup
  label='Address'
  content={profile.company.billingAddress}
/>