React/Typescript:当点击不同的元素时，如何触发一个元素的函数？

import React from 'react';

function handleClick() {
  console.log('元素被点击了');
}

function App() {
  return (
    <div>
      <button onClick={handleClick}>点击我</button>
    </div>
  );
}

export default App;

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from './store';

// 定义动作类型和动作创建函数
const SET_ACTIVE_ELEMENT = 'SET_ACTIVE_ELEMENT';

interface SetActiveElementAction {
  type: typeof SET_ACTIVE_ELEMENT;
  payload: string;
}

export function setActiveElement(activeElement: string): SetActiveElementAction {
  return {
    type: SET_ACTIVE_ELEMENT,
    payload: activeElement,
  };
}

// 定义初始状态和状态处理函数
interface AppState {
  activeElement: string;
}

const initialState: AppState = {
  activeElement: '',
};

function appReducer(state = initialState, action: SetActiveElementAction): AppState {
  switch (action.type) {
    case SET_ACTIVE_ELEMENT:
      return {
        ...state,
        activeElement: action.payload,
      };
    default:
      return state;
  }
}

// 在组件中使用状态管理库
function App() {
  const dispatch = useDispatch();
  const activeElement = useSelector((state: RootState) => state.app.activeElement);

  function handleClick(element: string) {
    dispatch(setActiveElement(element));
  }

  return (
    <div>
      <button onClick={() => handleClick('button1')}>按钮1</button>
      <button onClick={() => handleClick('button2')}>按钮2</button>
      {activeElement === 'button1' && <div>按钮1被点击了</div>}
      {activeElement === 'button2' && <div>按钮2被点击了</div>}
    </div>
  );
}

export default App;

import React, { useState } from 'react';

function App() {
  const [activeElement, setActiveElement] = useState('');

  function handleClick(element: string) {
    setActiveElement(element);
  }

  return (
    <div>
      <button onClick={() => handleClick('button1')}>按钮1</button>
      <button onClick={() => handleClick('button2')}>按钮2</button>
      {activeElement === 'button1' && <div>按钮1被点击了</div>}
      {activeElement === 'button2' && <div>按钮2被点击了</div>}
    </div>
  );
}

export default App;