如何无需自定义额外prop即可将父组件的class属性传递到子组件内部元素

核心思路 #

利用前端框架内置的属性透传能力，无需额外声明自定义prop即可将父组件传入的class直接绑定到子组件内部目标元素上。

Vue 实现步骤 #

1. 子组件中关闭根元素自动继承属性的配置
2. 将内置的$attrs对象绑定到内部input元素上，class会自动包含在内

<!-- 子组件代码 -->
<template>
  <div class="component-wrapper">
    <!-- 子组件其他内容 -->
    <input v-bind="$attrs" />
  </div>
</template>
<script>
export default {
  // 关闭根元素自动透传属性，避免class被加到外层div上
  inheritAttrs: false
}
</script>

父组件调用时直接传入class即可：

<!-- 父组件调用 -->
<MyInput class="custom-class" placeholder="请输入内容" />

如果需要和input自带的默认类名合并，修改input绑定代码即可：

<input class="default-input-class" v-bind="$attrs" />

React 实现步骤 #

1. 子组件中接收所有props后，将除了显式声明的props之外的剩余属性解构出来
2. 将剩余属性展开绑定到内部input元素上

// 子组件代码
function MyInput(props) {
  // 解构出子组件自身需要的props，剩余属性全部透传给input
  const { label, ...restProps } = props
  return (
    <div className="input-wrapper">
      <label>{label}</label>
      <input {...restProps} />
    </div>
  )
}

父组件调用时直接传入className即可：

// 父组件调用
<MyInput label="用户名" className="custom-class" placeholder="请输入用户名" />

需要合并默认类名时修改input代码即可：

<input className={`default-input ${restProps.className || ''}`} {...restProps} />

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