React中如何将包含props的对象向下传递给多层子组件

你更新2中给出的写法可以正常运行，属于对象字面量的实现方式，确实是你提到的那种通过对象传递上层props的实现。

以下是针对你的代码的优化建议和最佳实践说明：

1. 先修正主页面代码的小问题：你给三个组件传递的setvisitor回调是空参数的，调用后visitorType会被设为undefined，需要根据场景传入要切换的目标值，比如切换为buyside的回调应该写为() => setVisitorType('buyside')。
2. 透传props不需要额外嵌套一层mainprops，直接用JSX展开语法会更简洁，也能减少属性嵌套层级，提升可读性：

• 优化后的Viewer组件：

const MainView = (props) => {
    return(
        <>
            {/* 直接展开所有props传递给Navbar，也可以在后面追加Navbar自身的props */}
            <Navbar {...props} />
        </>
    )
};
export default MainView

• 优化后的Navbar组件，可以直接解构拿到需要的属性，还可以用switch语句简化多分支判断：

const Navbar = ({visitortype, setvisitor}) => {
  switch(visitortype) {
    case 'viewer':
      return <h1>viewer navbar</h1>
    case 'buyside':
      return <h1>buyside navbar</h1>
    case 'sellside':
      return <h1>sellside navbar</h1>
    default:
      return null
  }
};
export default Navbar;

3. 如果后续你的应用层级变深，visitorType需要透传超过3层组件的话，更推荐使用React Context来共享这个全局身份状态，避免层层传递props的冗余（也就是常说的props drilling问题）。你当前的场景只有三层组件，直接透传props是完全合理的，没有问题。

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