将props展平传到DOM上

优质

小牛编辑

128浏览

2023-12-01

当我们将展平(spread)的props传入子组件时我们便引入了风险, 因为我们可能往HTML标签上添加了它并不支持的属性.

下面这个例子会在DOM元素上增加一个该元素本身并不支持的属性flag.

const Sample = () => (<Spread flag={true} className="content"/>);
const Spread = (props) => (<div {...props}>Test</div>);

如果将HTML DOM元素需要接受的props分离出来再展开传入, 会是一种更安全的做法.

const Sample = () => (<Spread flag={true} domProps={{className: "content"}}/>);
const Spread = (props) => (<div {...props.domProps}>Test</div>);

或者我们也可以使用...rest去过滤掉那些HTML DOM并不支持的属性.

const Sample = () => (<Spread flag={true} className="content"/>);
const Spread = ({ flag, ...domProps }) => (<div {...domProps}>Test</div>);

需要注意的是

在这种情况下, 当我们使用了PureComponent时, 即使domProps没有变化时, 组件还是会被重新渲染. 因为PureComponent对于对象使用的是浅比较