如何复用组件并赋予不同className，在其他组件中导入使用？

1. 组件参数的命名问题 #

你不能用class作为组件的props参数名，因为**class是JavaScript的保留关键字**，这会导致语法错误或运行异常。建议改用符合规则的名称，比如和React属性名统一的className：

// 正确定义组件
const MyComp = ({ className }) => (
  <div className={className}>
    ...
  </div>
)

// 调用组件时传递样式类
return (
  <MyComp className="icon" />
)

2. 在List组件中修改className的方式 #

你当前在List组件里直接写{MyComp}是错误的——这是直接渲染组件的定义，而非实例化组件。正确做法是用<MyComp />的形式调用组件，并在此处传递新的className：

// 如果MyComp是List的props传入
const List = ({ MyComp }) => {
  // ...
  return (
    <div> 
      <MyComp className="list-item-style" />
    </div>
  )
}

// 使用List组件时传入MyComp
<List MyComp={MyComp} />

3. "expected a string"错误的原因 #

你遇到的错误核心就是用了class作为props参数名，违反JS语法规则导致React无法正确解析字符串参数。只要把参数名改成合法的（比如className），再用<MyComp className="anotherStyle" />的方式调用就可以正常运行。

内容的提问来源于stack exchange，提问作者JeremyFc