javascript - reactJS - 如何在 Prop 内串联？

Question

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

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

Answer 1

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

鉴于Pricing呈现 description Prop 作为

{prop.description}

description prop 可以与任何有效的 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}
  />