用getComponent怎么传递props? [英] With getComponent how to pass props?

问题描述

我不知道如何将 props 传递给组件.这很重要，因为我不想在 componentDidMount 方法中获取数据，因为这样搜索引擎将不可见.

I can't figure out how to pass props to the component. This is important as I don't want to fetch data in the componentDidMount method as it will then be invisible to search engines.

我的代码是这样的

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 应用程序，但我还需要在getComponent 指向并将其作为属性传入.例如.你通常会做这样的事情<Portfolio contentItems={fetchedItems}/>.

I'm trying to serve up a portfolio React App when the user visits a valid url like mysite.com/thishandleisvalid but I'll need to also fetch all the content for that app at the getComponent point and pass it in as a property. E.g. you might normally do something like this <Portfolio contentItems={fetchedItems} />.

这可能吗?

推荐答案

这对于无状态组件来说真的很容易做到.只需执行以下操作:

This is really easy to do with stateless components. Just do something like:

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

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

我们不明确支持这种模式的原因是，以这种方式进行连接是相当不典型的 - 对于需要处理此类事情的应用程序，使用 onEnter 更为常见 挂钩到例如填充 Flux 存储，然后根据需要将组件连接到相关存储.

The reason we don't explicitly support this sort of pattern is because it's fairly atypical to wire things up this way - for apps that need to deal with this sort of thing, it's much more common to use the onEnter hook to e.g. populate a Flux store, then connect the components as appropriate to the relevant stores.

这篇关于用getComponent怎么传递props?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！