reactJS-如何在道具中串联？

Question

在以下描述道具中，尝试在25价格旁边添加一个span类。有没有一种方法可以正确在其中添加跨度。当前在运行以下代码时获得[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.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}
  />