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

Question

在 prop 中使用模板字面量时如何让换行符起作用？

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_1 和 street_2 之后有一个换行符，但我根本没有换行符。

Answer 1

您可能会直接在 <TypographyGroup> 中呈现内容。将 content = {profile.company.billingAddress} 作为 prop 传递并在 <TypographyGroup>

的渲染方法中添加 <br/> 可能会更好

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

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}
/>

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

How can I get line breaks to work when using template literals in a prop?

reactjs

template-literals