文章/答案/技术大牛

发布

社区首页 >问答首页 >我可以在React中对此代码使用DRY概念吗？

问我可以在React中对此代码使用DRY概念吗？
EN

Stack Overflow用户

提问于 2022-02-14 11:14:06

回答 2查看 177关注 0票数 0

import React from "react";
import { Chip, Box } from '@mui/material';

const Browse = () => {

const [chip, setChip] = React.useState("all")

const handleClick = (event)=>{
  setChip(event.target.textContent);
  console.log(chip)
}


return (
  <Box mx={2} >
    <Box mt={2} sx={{display:"flex", gridGap:"20px", flexWrap:"wrap"}} >

    <Chip label="Price" sx={{color:"#FF005E"}}  onClick={handleClick} />
    <Chip label="Type of place" sx={{color:"#FF005E"}}  onClick={handleClick} />

    <Chip label="all"      variant={ "all" === chip ? "filled": "outlined" } onClick={handleClick} />
    <Chip label="mountain" variant={"mountain" === chip ? "filled": "outlined" } onClick={handleClick} />
    <Chip label="beach" variant={  "beach"  === chip ? "filled": "outlined" } onClick={handleClick} />
    <Chip label="island" variant={ "island" === chip ? "filled": "outlined" } onClick={handleClick} />
    <Chip label="desert" variant={ "desert" === chip ? "filled": "outlined" } onClick={handleClick} />
    <Chip label="plain" variant={  "plain"  === chip ? "filled": "outlined" } onClick={handleClick} />

    </Box>
  </Box>
);
};

export default Browse;

帮我任何一个，我需要简单的干概念，我的代码。我想做一些小动画与“材料-ui”芯片组件。所以我一遍又一遍地写同样的代码。所以，请解决这个任何人..。谢谢:)

javascript

reactjs

material-ui

web-deployment

dry

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-02-14 11:19:16

使用一个变体数组，然后映射：

  const chips = ["all","mountain","beach","island","desert","plain"]
    .map(variant => (
       <Chip
          key={variant}
          label="all"
          variant={ variant === chip ? "filled": "outlined" } 
          onClick={handleClick} />
    ))

然后，您可以在下面的JSX中使用{chips}。

文档：https://reactjs.org/docs/lists-and-keys.html

票数 2

Stack Overflow用户

发布于 2022-02-14 11:18:42

可以提取创建Chip的方法。

const createChip = (label) => <Chip label={label} variant={ label === chip ? "filled": "outlined" } onClick={handleClick} />

那就这么说吧

{createChip("all")}
{createChip("plain")}
...

或者创建一个数组

{["all", "plain"].map(createChip)}

但是要确保每个项目都有一个密钥。

<Chip key={label} ...

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71110950

复制

相似问题

问我可以在React中对此代码使用DRY概念吗？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以在React中对此代码使用DRY概念吗？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以在React中对此代码使用DRY概念吗？
EN