Question

这是我看到将道具传递给路线的几个例子之一，但我似乎无法让它工作

<Route path="/" render={()=><testPage num="2" someProp={100}/>}/>

下面的例子让我错误，因为“toggle”未定义？

const MyProductPage = (props) => {
      return (
        <ProductPage 
          toggle={this.toggle.bind(this)}
          {...props}
        />
      );
    }

另一个人：

<Route path="/path" render={(props) => <Component {...props} Props={} />} />

在这种情况下{... props}是什么意思？我在哪里放入我的组件？请解释我真的很想了解谢谢！：）

Answer 1

那么，对于您的MyProductPage组件，此处使用this是不正确的。 MyProductPage是一个功能组件，而不是类组件。

因为props像参数一样向下传递，所以你可以像使用任何其他参数一样访问它。

因此，下面的代码不应该传递错误...但是，在不了解您的代码的情况下，我不确定您需要绑定toggle方法的位置。< / p>

const MyProductPage = (props) => {
      return (
        <ProductPage 
          {...props}
          toggle={props.toggle}

        />
      );
    }

旁注：我也非常确定首先需要列出{...props}。见下文。

如果您继续遇到toggle返回未定义行为的问题，那么您可能需要更改父组件中this更高的词法绑定。如果你在这里设置它，它就会胜利。

至于你的第二个问题，{...props}是传播运营商的一个例子。可以找到反应友好的定义here。

稍微更改示例：

  var exampleObject= {};
  exampleObject.foo = x;
  exampleObject.bar = y;
  var component = <Component {...exampleObject} />;

...传播运营商只是说，从exampleObject采取所有方法，并将它们作为道具传递下去。这是另一种说法：

 <Component foo={exampleObject.foo} bar={exampleObject.bar} />

这会在exampleObject中传递所有并将其传递下去。

想象一下，如果您要将20个属性传递给子组件。这可能很快就会变得冗长，因此传播操作符只是一些合成糖，所以你不必全部写出来。

编辑：要进一步将其与您的示例联系起来：

如果父组件像这样传递道具，则为图像：

<MyProductPage {...exampleObject} />
// Includes .foo and .bar

然后，如果您不需要更改任何存储的值，子组件可以只看这个

const MyProductPage = (props) => {
      return (
        <ProductPage {...props} />
      );
    }
// still contains .foo and .bar

但是，如果你需要更改其中一个属性，那么，你只需单独传递它（有点像＆＃34;覆盖＆＃34;）：

const MyProductPage = (props) => {
      return (
        <ProductPage 
           {...props}
           foo={props.foo + 1}
        />
      );
    }
// still contains .foo and .bar, but foo will be different.

{...props}首先将所有内容传递下来，然后，显式调用foo会覆盖传递的内容并为其提供新值。

不明白如何将道具传递给路线

1 个答案: