当前位置：首页 > React

react如何多模板

2026-01-24 04:33:45React

在React中实现多模板功能

React中实现多模板通常涉及动态渲染不同的布局或组件结构。可以通过条件渲染、高阶组件或路由配置实现。

使用条件渲染

根据状态或属性选择不同的模板组件：

const TemplateA = () => <div>模板A内容</div>;
const TemplateB = () => <div>模板B内容</div>;

function App() {
  const [currentTemplate, setTemplate] = useState('A');

  return (
    <div>
      {currentTemplate === 'A' ? <TemplateA /> : <TemplateB />}
      <button onClick={() => setTemplate('B')}>切换模板</button>
    </div>
  );
}

通过路由配置不同模板

使用React Router为不同路由指定不同布局：

import { BrowserRouter as Router, Route } from 'react-router-dom';

const MainLayout = ({ children }) => (
  <div className="main-layout">
    <header>主布局</header>
    {children}
  </div>
);

const AdminLayout = ({ children }) => (
  <div className="admin-layout">
    <header>管理布局</header>
    {children}
  </div>
);

const LayoutRoute = ({ component: Component, layout: Layout, ...rest }) => (
  <Route {...rest} render={(props) => (
    <Layout>
      <Component {...props} />
    </Layout>
  )} />
);

function App() {
  return (
    <Router>
      <LayoutRoute path="/" exact layout={MainLayout} component={HomePage} />
      <LayoutRoute path="/admin" layout={AdminLayout} component={AdminPage} />
    </Router>
  );
}

使用高阶组件包装模板

创建可复用的模板高阶组件：

const withTemplate = (WrappedComponent, Template) => {
  return (props) => (
    <Template>
      <WrappedComponent {...props} />
    </Template>
  );
};

const Page1 = () => <div>页面1内容</div>;
const Page2 = () => <div>页面2内容</div>;

const Page1WithTemplateA = withTemplate(Page1, TemplateA);
const Page2WithTemplateB = withTemplate(Page2, TemplateB);

通过上下文提供模板选择

使用React Context全局管理模板选择：

const TemplateContext = React.createContext();

const TemplateProvider = ({ children }) => {
  const [template, setTemplate] = useState('A');

  return (
    <TemplateContext.Provider value={{ template, setTemplate }}>
      {children}
    </TemplateContext.Provider>
  );
};

const TemplateSwitcher = () => {
  const { template, setTemplate } = useContext(TemplateContext);

  return (
    <select value={template} onChange={(e) => setTemplate(e.target.value)}>
      <option value="A">模板A</option>
      <option value="B">模板B</option>
    </select>
  );
};

动态导入模板组件

结合React.lazy实现模板按需加载：

react如何多模板

const TemplateA = React.lazy(() => import('./TemplateA'));
const TemplateB = React.lazy(() => import('./TemplateB'));

function App() {
  const [template, setTemplate] = useState('A');

  return (
    <Suspense fallback={<div>加载中...</div>}>
      {template === 'A' ? <TemplateA /> : <TemplateB />}
    </Suspense>
  );
}