React中如何将类名与内联样式作为props传递

嘿，我来帮你搞定这个React props传递的问题～你之前的写法确实有问题，因为你把类名和内联样式混在了同一个tooltipClassName props里，这不符合React的语法规则，咱们一步步来修正：

方案1：分开传递类名和样式两个独立Props #

这是最清晰也最常用的方式，因为React里className和style本身就是元素的两个独立属性，咱们直接把它们拆成两个props传递：

1. 定义组件时接收两个props：

// 比如你的组件叫 TooltipWrapper
function TooltipWrapper({ tooltipClassName, tooltipStyle }) {
  return (
    <div 
      className={tooltipClassName}
      style={tooltipStyle}
    >
      {/* 这里放你的组件内容 */}
    </div>
  );
}

2. 调用组件时分别传递值：

<TooltipWrapper
  tooltipClassName="right mr3 relative center"
  tooltipStyle={{ marginTop: -300, zIndex: 2 }}
/>

这种方式逻辑清晰，后续维护起来也方便，不需要额外的处理。

方案2：包装成一个Props对象传递 #

如果你想把类名和样式打包成一个props传递（比如叫tooltipProps），可以用对象展开语法来简化：

1. 定义组件时接收打包后的props：

function TooltipWrapper({ tooltipProps }) {
  return (
    <div {...tooltipProps}>
      {/* 这里放你的组件内容 */}
    </div>
  );
}

2. 调用组件时传递包含className和style的对象：

<TooltipWrapper
  tooltipProps={{
    className: "right mr3 relative center",
    style: { marginTop: -300, zIndex: 2 }
  }}
/>

为什么你原来的写法不对？ #

你之前写的tooltipClassName={"right mr3 relative center" style={{ marginTop: -300, zIndex: 2 }}}是语法错误的——tooltipClassName应该接收一个字符串，但你在里面直接写了style对象，JavaScript根本无法解析这种混合写法，所以肯定会报错。

另外，你完全不需要用字符串插值，因为你的类名是固定的，直接传递字符串即可；只有当需要动态拼接类名（比如根据状态添加/移除类）时，才需要用到模板字符串或者类名工具库（比如classnames）。

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