React组件函数调用只更新一个组件实例

Question

我有一个名为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]} />

传递到组件中的数据道具是一个对象，包含一个函数调用作为其属性之一，如下所示。我在子组件的主容器上有一个onclick属性，它应该调用相应的函数。

函数是添加活动类以使背景更改颜色的函数。但是，每次单击组件时，它只会更改第一次出现的背景。正如你可能已经注意到的，我对这个组件调用了三次。无论我单击哪个组件，只有第一个组件的背景会发生变化。

以下是道具对象上的函数示例。

const handleDashBoardClick = () => {
const element = document.querySelector(".RightTab");
element.classList.toggle("active");
};

我不明白我做错了什么。我还可以使用其他什么方法？

Answer 1

尽管您使用了三次组件，但这并不意味着您在其中一个组件中所做的更改将反映在另两个组件中，除非您特别使用了传递给所有三个组件的状态参数。

此外，不建议使用添加活动类的方式，因为您将react与纯js混合处理CSS类名。

我建议使用一个单击处理程序来切换所有nRightTab组件的活动类：

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>
);
};