在JSX中传播具有相同属性的多个道具

html5 • • 问答

给定两个 props 对象：

const p1 = {
  id: "p1"
  //...
}

const p2 = {
  id: "p2"
  //...
}

如果将它们分布在同一个组件上，例如：

<MyComponent {...p1} {...p2}/>

React 如何确定id要使用的属性值？

也可以考虑其他情况，如

<MyComponent {...p1} id={"p3"} {...p2}/>
<MyComponent id={"p3"} {...p1} {...p2}/>

基本上，判断哪个属性值是它使用的值的背后规则是什么？

回答

按照它们出现的顺序，从左到右。它将遍历第一个传播，分配道具，然后通过第二个传播，覆盖任何重复项。

示范：

const Printout = (props: { x: number; y: number; z: number }) => {
  useEffect(() => console.log(props), [props]);
  return null;
};

const Demo = () => {
  const a = { x: 1, y: 2, z: 3 };
  const b = { y: 5, x: 6 };
  return <Printout {...a} z={4} {...b} />;
};

控制台输出：

{"x": 6, "y": 5, "z": 4}

从对象中获取键的顺序是一个不同的问题。请参阅JavaScript 是否保证对象属性顺序？例如。

以上是在JSX中传播具有相同属性的多个道具的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>