Question

我正在尝试创建一个可重用的组件，并使用props对其中的每个元素进行样式设置，我已经创建了一个对象，作为 classs prop 其中包含字段表示组件中所有元素的类。

我需要使用此对象来设置组件的样式，但是引用对象字段会引发错误：classes.prop is not defined

代码：

const Price = ({classes, ...props}) => {
    return (
        <div >
            <s className={classes.originalPriceClasses}> //not defined
                {props.originalPrice}
            </s>&nbsp;
            <span className={classes.newpriceClasses}> //not defined
                {props.newPrice}
            </span>
        </div>
    );
}

<Price 
  classes={{
    originalPriceClasses: "text-primary",
    newPriceClasses: "font-size-bg"
  }}
/>

更新：

将 Price 组件作为值传递给prop时，会发生此问题：

<Card 
   text= {
    <Price 
      classes={{
        originalPriceClasses: "text-primary",
        newPriceClasses: "font-size-bg"
      }}
    />

   }
>

但是当我还是小孩的时候通过 props.children 通过价格时，它起作用了：

 <Card >
  <Price 
     classes={{
        originalPriceClasses: "text-primary",
        newPriceClasses: "font-size-bg"
      }}
  />
</Card>

为什么在第一种情况下引用类属性会返回引用错误？

当该对象作为道具传递时，为什么不能引用对象属性？

0 个答案: