設置道具陣營組件動態

Question

我使用的反應，終極版和應對，路由器

我有這個routes.js：

export default (
    <Route path="/" component={App}> 
     <IndexRoute components={{ content: Home }} /> 
     <Route path="clients" components={{ content: Clients, sidebar: wrapClientSidebarWithProps({sidebarSelectedName: 'all'}) }} />  
    </Route> 
); 

function wrapClientSidebarWithProps(props) { 
    return <ClientSidebar {...props} />; 
} 

你可以假定所有的進口都在那裏。如果沒有<Route path="clients" ...一切只要它加到我得到以下工作正常，：

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of RouterContext .

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of RouterContext .

的app.js當這些得到渲染的是：

const App = ({content, sidebar}) => { 
    let wholeSidebar; 
    if (sidebar) { 
     wholeSidebar = (
      <section className="context-nav-container"> 
       {sidebar} 
      </section> 
     ); 
    } 

    return (
     <div className="main-container"> 
      <Header /> 

      {content} 

      {wholeSidebar} 
     </div> 
    ); 
} 

App.propTypes = { 
    content: PropTypes.object.isRequired, 
    sidebar: PropTypes.object 
}; 

export default App; 

的ClientSideBar.js是：

const ClientSidebar = ({selectedName}) => { 
    const linksObjs = [ 
     { id: 'all', name: 'All', to: 'clients', icon: 'fa-list' }, 
     { id: 'client', name: 'New', to: 'client', icon: 'fa-plus' } 
    ]; 

    const links = linksObjs.map((l, i) => { 
     const fullClasslist = 'fa ' + l.icon; 

     let stickClass = ''; 
     if (l.id === selectedName) { 
      stickClass = 'stick'; 
     } 
     return (
      <li key={i} className={stickClass}><Link to={l.to}> <i className={fullClasslist} /> {l.name}</Link></li> 
     ); 
    }); 

    return (
     <ul className="context-nav"> 
      {links} 
     </ul> 
    ); 
}; 

ClientSidebar.propTypes = { 
    selectedName: PropTypes.string 
}; 

export default ClientSidebar; 

Answer 1

所以這個功能：

function wrapClientSidebarWithProps(props) { 
    return <ClientSidebar {...props} />; 
} 

不能返回創建的組件，它需要返回可以創建組件的功能：

function wrapClientSidebarWithProps(props) { 
    return function WrappedClientSidebar() { return <ClientSidebar {...props} />; }; 
}