当前位置：首页 > React

react如何实现动态页面

2026-02-12 09:54:10React

React 实现动态页面的方法

使用状态管理（State）

React 的核心特性之一是状态管理，通过 useState Hook 或类组件的 this.state 可以实现动态数据绑定。状态变化会自动触发组件重新渲染，从而实现页面动态更新。

import React, { useState } from 'react';

function DynamicContent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

数据驱动渲染

动态页面通常依赖外部数据（如 API 返回）。通过 useEffect Hook 获取数据并更新状态，可以动态渲染内容。

import React, { useState, useEffect } from 'react';

function DataDrivenPage() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

条件渲染

根据状态或属性动态显示不同内容，使用条件语句（如 if 或三元运算符）控制渲染逻辑。

function ConditionalRender({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>欢迎回来</p> : <button>登录</button>}
    </div>
  );
}

动态路由

结合 react-router-dom 实现基于 URL 的动态页面切换。通过路由参数加载不同数据或组件。

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

function ProductPage() {
  const { id } = useParams();
  const [product, setProduct] = useState(null);

  useEffect(() => {
    fetch(`https://api.example.com/products/${id}`)
      .then(res => res.json())
      .then(data => setProduct(data));
  }, [id]);

  return product ? <div>{product.name}</div> : <p>加载中...</p>;
}

function App() {
  return (
    <Router>
      <Route path="/product/:id" component={ProductPage} />
    </Router>
  );
}

全局状态管理

对于跨组件的动态数据，使用 Context API 或 Redux 管理全局状态，确保多组件同步更新。

const ThemeContext = React.createContext();

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      切换主题
    </button>
  );
}

动态样式

根据状态动态修改样式或类名，实现视觉交互效果。

function DynamicStyle() {
  const [active, setActive] = useState(false);

  return (
    <div 
      style={{ color: active ? 'red' : 'black' }}
      className={active ? 'active' : ''}
      onClick={() => setActive(!active)}
    >
      点击切换样式
    </div>
  );
}

react如何实现动态页面