Question

我无法弄清楚如何将道具传递给组件。这很重要，因为我不想在componentDidMount方法中获取数据，因为它对搜索引擎是不可见的。

我的代码看起来像这样

const router = 
<Route path="/" component={App}>
<IndexRoute onEnter={redirectToLogin} component={LandingPage} />
<Route path="panel" component={ ControlPanel }>
  ...
</Route>
<Route 
  path="/:handle" 
  onEnter={maybeRedirectToHome}
  getComponent={(location, callback)=> {
      getSiteHandleByName(location.pathname.slice(1))
      .then(function(handle){
        if (handle){
          callback(null, Portfolio)
        } else {
          callback(null, NotFound)
        }
      })
      .catch(callback)
  }}
  getChildRoutes={(location, callback)=> {
    callback(null, portfolioRoutes)
  }} 
/>
</Route>

当用户访问mysite.com/thishandleisvalid这样的有效网址时，我尝试提供投资组合React App，但我还需要在{{1}获取该应用的所有内容指向并将其作为属性传递。例如。你通常可以这样做getComponent。

这样做可能吗？

Answer 1

使用无状态组件非常容易。做一些像：

function getComponent(location, callback) {
  const Component = /* ... */;
  const items = /* ... */;

  callback(null, props => <Component {...props} items={items} />);
}

我们没有明确支持这种模式的原因是因为以这种方式连接起来是相当不典型的 - 对于需要处理这类事情的应用程序，使用{{1}更为常见}挂钩到例如填充Flux商店，然后根据需要将组件连接到相关商店。

Answer 2

另外，如果您不介意访问route下的道具，您可以传递这样的道具：

<强> JSX：

<Route 
  path="route_path" 
  customProp="hello"
  getComponent={(location, cb) => {
    // ...
  }}

<强>编程方式：

childRoutes: [
{
  path: 'route_path',
  customProps: 'hello',
  getComponent(location, cb) {
    // ....
  },

customProp可通过props.route.customProp

获取

Answer 3

curry看起来更简单（使用recompose / withProps更简单）

phpoffice/phpexcel:1.8.1

<强>更新

注意：性能我的版本只是一个过分响应的问题，而且，我认为，它有同样的麻烦：它会导致重新路由完整的组件重新出现。

这是因为在每个新位置使用withProps增强器重新包装组件，这会在每次重新路由时生成新组件。

作为一种快速解决方案，我决定将所有增强缓存在weakmaps中。在我的情况下，它看起来像

const getComponentWithProps = (props) =>
  (location, cb) => {
    const Component = /* ... */;
    // ...
    cb(null, withProps(props)(Component))
  }
...
childRoutes: [
  {
    path: 'route_path',
    getComponent: getComponentWithProps({ foo: 'bar' }),
  }
]

用getComponent如何传递道具？

3 个答案: