时间戳

首页 > 解决方案 > reactJS - 如何在道具内连接？

javascript - reactJS - 如何在道具内连接？

问题描述

尝试在下面的描述道具中在 25 的价格旁边添加一个跨度类。有没有办法我可以在那里正确添加一个跨度。当前在运行以下代码时获取 [object Object]。

  <Pricing
    title="Standard"
    description={<span>"$"</span> + "25"}
    button="Buy Now for $25" 
    amount={2500}
  />

标签： javascriptreactjs

解决方案

<span>"$"</span>导致 React 组件[object Object]在与字符串连接时将被字符串化。

鉴于将propPricing渲染为description

{prop.description}

descriptionprop 可以与任何有效的 JSX 表达式一起提供。例如一个数组：

  <Pricing
    title="Standard"
    description={[<span>"$"</span>, "25"]}
    button="Buy Now for $25" 
    amount={2500}
  />

或者React.Fragment：

  <Pricing
    title="Standard"
    description={<><span>"$"</span>25</>}
    button="Buy Now for $25" 
    amount={2500}
  />

推荐阅读