reactjs - 是否可以在不重新渲染的情况下使组件样式依赖于状态？

Question

我正在使用下面的组件 - 当过滤器状态对应于它时，我需要包含该按钮，否则会进行概述。

我现在这样做的方式是，每次状态更改时组件都会重新渲染 - 我明白为什么会发生这种情况。但是，我想知道是否有一种方法可以在不参考filter此组件中的状态的情况下实现相同的功能？如果每次状态更改时按钮都消失，这不是很好的用户体验。

function FilterButtons({ filter, setFilter }) {
  const classes = useStyles();

  return (
    <div className={classes.heroButtons}>
      <Grid container spacing={2} justify="center">
        <Grid item>
          <Button
            variant={filter === "All" ? "contained" : "outlined"}
            color="primary"
            onClick={() => setFilter("All")}
          >
            All
          </Button>
        </Grid>
        <Grid item>
          <Button
            variant={filter === "Blue" ? "contained" : "outlined"}
            color="primary"
            onClick={() => setFilter("Blue")}
          >
            Blue
          </Button>
        </Grid>
        <Grid item>
          <Button
            variant={filter === "Red" ? "contained" : "outlined"}
            color="primary"
            onClick={() => setFilter("Red")}
          >
            Red
          </Button>
        </Grid>
        <Grid item>
          <Button
            variant={filter === "Green" ? "contained" : "outlined"}
            color="primary"
            onClick={() => setFilter("Green")}
          >
            Green
          </Button>
        </Grid>
      </Grid>
    </div>
  );
}

标签： reactjs

Answer 1

你应该看看样式化的组件。这正是您在问题中所描述的。您可以将道具传递给样式化的组件，它将使用此道具更新其样式而无需渲染。