时间戳

首页 > 解决方案 > 使用 React 通过多个按钮减少代码冗余

javascript - 使用 React 通过多个按钮减少代码冗余

问题描述

我有一系列图标按钮，其中大多数属性都很常见。唯一改变的是图标类型和 onClick 函数。目前，我正在以下列方式实现它：

const listOfButtons =  <div>
            <IconButton
                flat
                icon={<AddIcon />}
                onClick={doSomething}
                primary
            />
            <IconButton
                flat
                icon={<EditIcon />}
                isDisabled
                primary
            />
            <IconButton
                flat
                icon={<TrashIcon />}
                isDisabled
                primary
            />
            <IconButton
                flat
                icon={<RefreshIcon />}
                primary
            />
            </div>;

我想尝试减少代码的冗余并尝试仅定义一个 IconButton 对象并将不同的图标和不同的 onClick 传递给它，因为将来可能会有更多的图标按钮。我对如何将 onclick 分配给特定的图标按钮感到困惑。有没有比我上面所做的更有效的方法来定义多个图标按钮并分配图标和点击？请帮忙！

标签： javascriptreactjs

解决方案

您可以创建一个更改属性的数组，然后使用Array.map.

const buttonData = [
    {
        icon: <AddIcon />,
        onClick: doSomething
    },
    {
        icon: <EditIcon />,
        isDisabled: true
    },
    {
        icon: <TrashIcon />,
        isDisabled: true
    },
    {
        icon: <RefreshIcon />
    }
];

const listOfButtons =  <div>
    {
        buttonData.map((data, index) => (
            <IconButton
                key={index}
                flat
                icon={data.icon}
                onClick={data.onClick}
                isDisabled={data.isDisabled}
                primary
            />
        ))    
    }
</div>;

注意：当映射 React 组件时，React 需要key从映射返回的根组件上的属性。这是为了让 React 可以跟踪哪个组件是哪个组件（在重新排序或从数组中删除项目的情况下）。最好使用正在映射的项目的唯一标识符（因为如果项目更改位置，这将保持不变），但如果您完全控制正在使用的数组并且可以确保没有项目更改索引，那么使用索引很好。如果您使用索引并且项目确实更改了位置，则会导致不必要的 DOM 更改。

推荐阅读