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

Question

这是我看到的将 props 传递给路由的少数几个示例之一，但我似乎无法让它工作

<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 是功能组件，而不是 class 组件。

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

因此，下面的代码不应传递错误...但是，在不了解您的代码的情况下，我不确定您需要在哪里绑定 toggle 方法。

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

        />
      );
    }

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

如果您仍然遇到 toggle 返回未定义行为的问题，那么您可能需要更改父组件中更高层 this 的词法绑定。在这里设置就不行了

关于你的第二个问题，{...props}是展开运算符的一个例子。可以找到 React 友好的定义 here.

稍微改变一下例子：

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

...传播运算符只是说，从 exampleObject 中获取所有方法，并将它们作为 props 传递下去。这是另一种说法：

 <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

但是，如果您确实需要更改其中一个属性，则只需将其单独传递（有点像 "override"）：

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

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

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

Dont understand how to pass props to routes

reactjs

react-router

react-router-v4