时间戳

首页 > 解决方案 > 你如何传递一个包含道具的对象

javascript - 你如何传递一个包含道具的对象

问题描述

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

所以，我有我的主页，它包含 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>
    )}
  };

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

查看器组件 -UPDATED-：

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 的意思吗？

标签： javascriptreactjsnext.js

解决方案

首先，传递道具有一定的规则：

  1. 您永远不会将文字对象作为道具传递，因为每次重新渲染都不相同，并且会导致子组件也重新渲染（没有任何新信息）
  2. 你不需要这样做
  <Viewer visitortype='viewer' setvisitor={()=>setVisitorType()}/>

你可以：

  <Viewer visitortype='viewer' setvisitor={setVisitorType}/>

因为它来自useState反应确保setVisitorType保持相同的参考

现在对于你的错误，你几乎纠正了你刚刚做了一个 js 语法错误，你应该这样写：

const MainView = (props) => {
    return(
        <>
            <Navbar mainobj={{
                visitortype:props.visitortype,
                setvisitor:props.setvisitor
            }}
            />
        </>
    )
};

export default MainView

但同样你永远不会将文字对象作为道具发送我会将它保存在 ref 或 state 中（取决于访问者状态是否会改变）

推荐阅读