时间戳

首页 > 解决方案 > 如何让反应只渲染组件的一部分？

reactjs - 如何让反应只渲染组件的一部分？

问题描述

我正在用 CSS 网格编写一个反应应用程序。我不打算在这里包含 css，但它是一个 2x2 网格。

import { useState } from 'react';

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

  return (
    <div className = "gridwrapper">
        <div className = "top_left"> <SomeCustomComponent></div>
        <div className = "bottom_left"> <CustomCounter counter = {count}></div>
        <div className = "bottom_right"> <CustomCounter counter = {count+2}></div>
        <div className = "top_right"><button onClick={() => setCount(count + 1)}>Click me</button><div>
    </div>
  );
}

function CustomCounter({count}){
return(<p>The count is {count}</p>)
}

我现在有两个问题

  1. 由于 setState 会导致重新渲染，现在它会重新渲染整个事情。但是我只需要重新渲染底部的两个单元格，因为我的 Container 组件的其他部分甚至不依赖于道具。

  2. 为了让我的网格结构正常工作，我需要将它们包装在 div 中，这是为什么呢？我之前尝试直接分配类名，但没有用

标签： reactjsgrid

解决方案

  1. 您可以使用 useEffect 侦听器仅在特定变量更改时更改。据我所知，您不能只重新渲染组件的一部分。
  2. 当您制作自定义组件时，您还需要使 className 属性在子组件上可用。

例如

function SomeCustomComponent(props) {
  return (
    <div className={props.className}>
       // ... your component stuff here ..
    </div>
  )
}

推荐阅读