当前位置：首页 > React

react 实现动态渲染

2026-01-26 17:43:16React

动态渲染的实现方法

在React中实现动态渲染通常涉及根据数据或状态的变化动态生成组件或UI元素。以下是几种常见的实现方式：

使用map方法渲染动态列表

通过数组的map方法可以将数据数组转换为React元素数组：

const items = ['Item 1', 'Item 2', 'Item 3'];

function ListComponent() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

条件渲染

根据条件决定是否渲染特定内容：

function ConditionalComponent({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <UserGreeting /> : <GuestGreeting />}
      {isLoggedIn && <Dashboard />}
    </div>
  );
}

动态组件加载

使用动态导入和React.lazy实现按需加载组件：

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

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <DynamicComponent />
    </Suspense>
  );
}

使用HOC实现动态渲染

高阶组件可以包装组件并添加动态行为：

function withDynamicData(WrappedComponent) {
  return function(props) {
    const [data, setData] = useState(null);

    useEffect(() => {
      fetchData().then(setData);
    }, []);

    return data ? <WrappedComponent data={data} {...props} /> : <LoadingSpinner />;
  };
}

动态路由渲染

在React Router中实现动态路由匹配：

<Route path="/users/:id" render={({ match }) => (
  <UserProfile userId={match.params.id} />
)} />

动态样式渲染

根据状态动态应用样式：

react 实现动态渲染

function DynamicStyleComponent({ isActive }) {
  const style = {
    color: isActive ? 'green' : 'red',
    fontWeight: isActive ? 'bold' : 'normal'
  };

  return <div style={style}>Dynamic Style</div>;
}