• 组件切换
    • 参考资料:

    组件切换

    一个可切换的组件实际上是包含了多个组件, 选择渲染其中某个组件的组件.
    我们使用对象来将props的值和组件做上映射.

    1. import HomePage from './HomePage.jsx';
    2. import AboutPage from './AboutPage.jsx';
    3. import UserPage from './UserPage.jsx';
    4. import FourOhFourPage from './FourOhFourPage.jsx';
    6. const PAGES = {
    7.   home: HomePage,
    8.   about: AboutPage,
    9.   user: UserPage
    10. };
    12. const Page = (props) => {
    13.   const Handler = PAGES[props.page] || FourOhFourPage;
    15.   return <Handler {...props} />
    16. };
    18. // The keys of the PAGES object can be used in the prop types to catch dev-time errors.
    19. Page.propTypes = {
    20.   page: PropTypes.oneOf(Object.keys(PAGES)).isRequired
    21. };

    参考资料:

    • https://hackernoon.com/10-react-mini-patterns-c1da92f068c5