Setting Props on React Component dynamically

I'm using React, Redux and React-Router

I have this 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} />;
}

You can assume all the imports are there. Without that <Route path="clients" ... everything works fine, as soon as it is added I get the following:

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 .

The app.js where these get rendered is:

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;

The ClientSideBar.js is:

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;

---

So this function:

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

Can't return the created component, it needs to return a function that can create the component:

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

链接地址: http://www.djcxy.com/p/52182.html

上一篇: 选择组件，而不是渲染

下一篇: 动态地在React组件上设置道具