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

正如您所看到的，当添加活动类时它会更改颜色。我在父组件中有一个数组，我将其作为 props 传递给子组件。这是数组

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 属性，它应该调用相应的函数。

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

这是 prop 对象上的函数的示例。

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

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

Answer 1

尽管您使用3次组件，但这并不意味着您在其中一个组件中进行的更改将反映在另一个2中，除非您专门使用传递给所有3个的状态参数。

另外，不建议添加活动类的方式，因为您将React与纯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>
  );
};