只更新一个组件实例
只更新一个组件实例
提问于 2022-04-06 12:01:56
我有一个组件名为RightTab，如下所示
const RightTab = ({ data }) => {
return (
<div className="RightTab flex__container " onClick={data.onClick}>
<img src={data.icon} alt="Dashboard Icon" />
<p className="p__poppins">{data.name}</p>
{data.dropDown === true ? (
<div className="dropdown__icon">
<img src={Assets.Arrow} alt="Arrow" />
</div>
) : (
<div className="nothing"></div>
)}
</div>
);
};
export default RightTab;该选项卡的CSS中有一个活动状态，如下所示
.RightTab.active {
background-color: var(--primaryGreen);
}正如您所看到的，当添加一个活动类时，它会改变颜色。在中有一个数组，父组件作为道具传递给子组件。这是数组
const dataArray = [
{
name: "Dashboard",
icon: Assets.Dashboard,
dropDown: false,
onClick: handleDashBoardClick,
},
{
name: "Inventory",
icon: Assets.Inventory,
dropDown: true,
onClick: handleInventoryClick,
},
{
name: "Reports",
icon: Assets.Reports,
dropDown: true,
onClick: handleReportsClick,
},
];我就是这样把道具递下来的。
<RightTab data={dataArray[0]} />
<RightTab data={dataArray[1]} />
<RightTab data={dataArray[2]} />传递到组件中的data支柱是一个包含函数调用的对象，作为其属性之一，如下所示。我在子组件的主容器上有一个onclick属性，该容器应该调用相应的函数。
该函数是添加活动类以使背景更改颜色的函数。但是，每次单击组件时，它都只更改第一个事件的背景。正如你可能已经注意到的，我称这个组件为三次。无论我单击的哪个组件，只有第一个组件的背景更改了。
下面是一个函数的示例，该函数位于支柱对象上。
const handleDashBoardClick = () => {
const element = document.querySelector(".RightTab");
element.classList.toggle("active");
};我不明白我做错了什么。我还能用什么方法呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-04-06 12:23:42
尽管您使用组件3次，但这并不意味着您在其中一个组件中所做的更改将反映在另一个组件中，除非您特别使用传递给所有3个组件的状态参数。
另外，不建议使用添加活动类的方式，因为使用纯js来处理CSS类名。
我建议使用一个单击处理程序来切换所有n RightTab组件的活动类：
const MainComponent = () => {
const [classNames, setClassNames] = useState([]);
const handleClick = (name) =>
{
const toggledActiveClass = classNames.indexOf('active') === -1
? classNames.concat(['active'])
: classNames.filter((className) => className !== 'active');
setClassNames(toggledActiveClass);
switch (name) {
case 'Dashboard';
// do something
break;
case 'Inventory':
// ....
break;
}
}
const dataArray = [
{
name: "Dashboard",
icon: Assets.Dashboard,
dropDown: false,
onClick: handleClick.bind(null, 'Dashboard'),
},
{
name: "Inventory",
icon: Assets.Inventory,
dropDown: true,
onClick: handleClick.bind(null, 'Inventory'),
},
{
name: "Reports",
icon: Assets.Reports,
dropDown: true,
onClick: handleClick.bind(null, 'Reports'),
},
];
return (
<>
{dataArray.map((data) =>
<RightTab key={data.name}
data={data}
classNames={classNames} />)}
</>
);
};
const RightTab = ({ data, classNames }) => {
return (
<div className={classNames.concat(['RightTab flex__container']).join(' ')}
onClick={data.onClick}>
<img src={data.icon} alt="Dashboard Icon" />
<p className="p__poppins">{data.name}</p>
{data.dropDown === true ? (
<div className="dropdown__icon">
<img src={Assets.Arrow} alt="Arrow" />
</div>
) : (
<div className="nothing"></div>
)}
</div>
);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71766398
复制相关文章
相似问题
腾讯云开发者
