React中如何正确将props向下传递给子组件

问题原因 #

你当前的透传props写法完全错误：
在JSX语法中，<NavBar props /> 等价于 <NavBar props={true} />，仅向NavBar组件传递了一个名为props、值为true的属性，并未将MasterNavBar接收到的color、scrollChange等属性向下传递，因此你在NavBar中访问props.color自然返回undefined。

正确写法 #

方案1：全量透传所有props（最常用）

如果你需要把MasterNavBar收到的所有props都原封不动传给NavBar，直接使用JSX扩展运算符即可：

// 在MasterNavBar组件内
<NavBar {...props} />

这种写法会把MasterNavBar接收到的所有属性（包括color、scrollChange）全部透传给NavBar，你在NavBar内可以直接通过props.color、props.scrollChange正常取值。

方案2：手动指定传递的属性

如果你只需要透传部分属性，不需要把MasterNavBar收到的所有props都传下去，可以手动逐个声明：

// 在MasterNavBar组件内
<NavBar color={props.color} scrollChange={props.scrollChange} />

这种写法更可控，能避免传递不必要的冗余属性给子组件。

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