React自定义组件如何更简洁传递默认style属性？

你有一个仅包含<img>的React自定义组件MyIcon，初始代码如下：

const MyIcon= ()=>{
  return <img src={GMNT_N_Black}/>
}

直接使用<MyIcon style={{width:"1em",height:"1em"}}/>时样式不生效，目前通过显式接收style props传递给内部<img>实现了需求：

const MyIcon = ({style})=>{
  return <img src={imported_img} style={style}/>
}

但因为组件只有一个<img>元素，想知道有没有更简洁的实现方式，还是当前方案就已经合适。

更简洁的实现方式 #

针对这种仅包装单个原生元素的组件，有两种更灵活简洁的写法，能自动透传所有props（包括style）：

1. 直接展开所有props #

用...props把组件接收的所有props一次性传递给内部<img>，不仅style，其他像alt、className这类img原生属性也能直接生效：

const MyIcon = (props) => {
  return <img src={imported_img} {...props} />;
};

2. 结合默认属性的剩余props写法 #

如果需要给<img>设置默认属性，同时允许外部传入的props覆盖默认值，可以用剩余操作符：

const MyIcon = ({ src = imported_img, ...props }) => {
  return <img src={src} {...props} />;
};

这种写法下，外部传入的src会覆盖默认的imported_img，其他所有props（包括style）都会透传给<img>。

当前方案的合理性 #

你现在的写法完全可行，但仅接收了style一个props，扩展性较差——如果之后需要传递其他img属性，还要逐个添加props声明。相比之下，props展开的方式更灵活，代码也更简洁，更适合这种单一元素的包装组件。

内容的提问来源于stack exchange，提问作者Germán