有沒有辦法通過道具傳遞動作？ 使用 react-redux 制作可重復使用的組件

Question

我想制作一個動態加載動作和狀態的組件，以便我可以在代碼的其他部分重用它。

我正在嘗試這種方式，但該操作在發送到組件之前觸發：

function ClientsHeader(props) {
    const action = Actions.searchClients();
    return (
        <SearchHeader data={data} campoPesquisa={campoPesquisa} action={action}/>
    );
}    
export default ClientsHeader;

關於兒童：

function SearchHeader(props) {
  const dispatch = useDispatch();
  const action = props.action;

  return;
  <div className="flex flex-1 w-full items-center justify-between">
    <Input
      placeholder="Search"
      onChange={event => dispatch(action(event))}
    />
  </div>;
}

有沒有辦法用變量調用 function 名稱？ 因為那會解決這個問題。

請不要對我的愚蠢無禮，我是新手：D

Answer 1

錯誤來自const action = Actions.searchClients();

這實際上調用了 function searchClients 。

它應該是const action = () => Actions.searchClients();

Answer 2

這是因為您在 ClientsHeader 組件中調用 Actions.searchClients，您只需將引用傳遞為

const action = Actions.searchClients;

注意：我認為你應該直接在組件中導入動作，

希望能幫助到你