用getComponent如何传递道具？

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>

我正在尝试在用户访问有效网址时提供投资组合React App,mysite.com/thishandleisvalid但我还需要在该getComponent点获取该应用的所有内容并将其作为属性传递.例如,你通常会做这样的事情<Portfolio contentItems={fetchedItems} />.

这样做有可能吗？

Answer 1

使用无状态组件非常容易.做一些像:

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

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

我们没有明确支持这种模式的原因是因为以这种方式连接起来是非常不典型的 - 对于需要处理这类事情的应用程序,使用onEnter钩子来填充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