在将所有状态弄混之后，我现在正尝试以一种可能更能反映最佳实践的方式重组我的应用程序（不确定这是否是方法，欢迎提出建议。）

因此，我有我的主页，其中包含 3 个状态：查看器、买方、卖方

还有三个不同的组件，每个组件对应一个状态。

我希望能够将道具从主页通过这些组件传递给他们的子项（我读过这是最好的方法？？）

主页：

  //we have 3 states for the website: viewer,buyside customer, sellside customer
  const [visitorType, setVisitorType] = useState('viewer');
  
  if (visitorType == 'viewer') {
    return(
      <div>
        <Viewer visitortype='viewer' setvisitor={()=>setVisitorType()}/>
      </div>
    )}
  else if (visitorType =='buyside') {
    return(
      <div>
        <Buyside visitortype='buyside' setvisitor={()=>setVisitorType()}/>
      </div>
    )}
  else if (visitorType =='sellside') {
    return(
      <div>
        <Sellside visitortype='sellside' setvisitor={()=>setVisitorType()}/>
      </div>
    )}
  };

传递主页道具的最佳方法是什么，以便我可以将它们与子道具一起带给任何孙子？

查看器组件 - 已更新 -：

const MainView = (props) => {
    return(
        <>
            <Navbar mainprops={{props}}/>
        </>
    )
};

export default MainView

我以前只是单独传递它们，但是意识到将其作为一个对象来执行可能会更好...

更新：语法上的观点正确，但我想知道如何最好地传递对象

导航组件（孙组件）

const Navbar = (props) => {
  const {mainprops} = props.mainprops;

  if (mainprops.visitortype == 'viewer') {
    return(
      <>
      <h1>viewer navbar</h1>
      </>
    )}
  else if (mainprops.visitortype =='buyside') {
    return(
      <>
      <h1>buyside navbar</h1>
      </>
    )}
  else if (mainprops.visitortype =='sellside') {
    return(
      <>
      <h1>sellside navbar</h1>
      </>
    )}
  };

export default Navbar;

更新 2 - 这有效，但不确定这是否是正确的方法，这些仍然被视为对象文字吗？

查看器组件：

const MainView = (props) => {
    const mainprops = {...props}
    return(
        <>
            <Navbar mainprops={mainprops}/>
        </>
    )
};

export default MainView

导航栏组件

const Navbar = (props) => {
  const mainprops = {...props.mainprops};

  if (mainprops.visitortype == 'viewer') {
    return(
      <>
      <h1>viewer navbar</h1>
      </>
    )}
  else if (mainprops.visitortype =='buyside') {
    return(
      <>
      <h1>buyside navbar</h1>
      </>
    )}
  else if (mainprops.visitortype =='sellside') {
    return(
      <>
      <h1>sellside navbar</h1>
      </>
    )}
  };

export default Navbar;

如果这是正确的，那么这是@amir的意思吗？