传递一些东西来渲染函数

Question

当前路线：

// React render() return example
<Switch>
  <Route path="/" exact render={this.renderPage}/>
  <Route path="/search" render={this.renderPage}/>
  <Route path="/profile" render={this.renderPage}/>
  <Route render={this.renderPage}/>
</Switch>

// here's the simplified method that Route-s call if path matches
renderPage(props) {
  // JS logic is here

  return [
    <ItemHeader key="header"/>,
    <ItemWrapper key="wrapper">
      {/* this is what the question is about: */}
      {/* how do I pass this dynamic Component here or even hint about it? */}
      <Component someProp={varBasedOnJSLogicAbove}/>
    </Wrapper>
  ];
}

如何将任何数据传递给renderPage方法？

我需要将我的组件作为变量（或任何正确的提示 - string etc ）传递给renderPage方法，因为我需要告诉它我想要它呈现的组件。

为什么你甚至需要renderPage方法？

有JavaScript逻辑，我还需要将Component与其他组件包装在一起。

1。为什么不在component使用Route道具？

<Route path="/profile" component={Profile}/>

因为我需要包装组件并将一些数据注入其中，就像在renderPage方法中一样。

2。为什么不创建一个单独的React组件并执行所有renderPage逻辑和包装呢？您可以将所需的所有内容传递给props等：

<CustomRoute path="/profile" component={Profile} anyThing="ILikeToPass"/>

尝试过，不幸的是它打破Switch（我真的需要它），Route必须是直接的孩子。

3。为什么不为每条路线使用不同的方法？ E.g renderProfile。

除了不同的Component之外，有20种方法，每种方法都有完全相同的代码吗？不，谢谢！

4。为什么不将数据作为函数/方法参数传递？

<Route path="/profile" render={this.renderPage(Component, 'foo')}/>
// or
<Route path="/profile" render={() => this.renderPage(Component, 'bar')}/>

不按需要工作。第一个选项似乎覆盖了React Router传递给我的方法的props（我需要那些），如果你使用箭头函数 - 它只传递props，而不是我的args。

5。为什么不使用pathname并自己弄明白？

使用没有Route道具的单个path并在我的方法中执行所有路径名解析和逻辑？如果不是 那么使用路由器和Route - 这是一个很大的问题。我不想重建路由器。

Answer 1

所以，这是一个答案：

为什么不尝试：

<Route path="/profile" render={(props) => this.renderPage(props, Component, 'bar')}/>