为何传入Parent组件的props能被Child组件访问？React组件导出逻辑问题解析

嘿，这个现象的核心原因其实很简单，咱们看一下你的Parent.js代码就能明白：

在Parent.js里，你并没有定义属于自己的Parent组件，而是直接导入了Child组件，然后把它重新导出了：

import Child from "./Child";
export default Child;

这就意味着**Parent其实就是Child组件的一个别名**——当你在App.js里写<Parent test="Hello" />的时候，本质上和直接写<Child test="Hello" />是完全一样的。React会把你传给Parent的所有props，原封不动地传递给这个被导出的Child组件，所以Child自然就能访问到test这个props值了。

打个通俗的比方：你本来想把东西交给张三，但张三其实是李四的另一个名字，最后接收到东西的还是李四，和你直接递给李四没区别。

如果你的初衷是让Parent作为一个独立的组件，再嵌套Child，那你需要修改Parent.js，定义自己的组件逻辑，比如：

import Child from "./Child";
export default function Parent(props) {
  // 这里可以处理props，或者决定是否传递给Child
  return <Child {...props} />; // 如果要把props传给Child，需要显式传递
}

这样Parent才是一个真正独立的组件，你可以自主控制是否把props传递给Child。

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