將 onclick function 作為參數傳遞給反應/打字稿中的另一個組件

Question

新的 Reactjs(Hooks) 開發人員在這里，我的問題：我現在在 Menu.tsx 中，我想點擊那個按鈕，它應該影響“Transports.tsx”中的另一個組件，我寫了兩種方法（不知道如何使它們工作），一種方法是普通按鈕和 onclick ，另一種方法是將它們添加到 '< Link to=" / Transports " >' 中。 如果我將該按鈕放在同一個組件“Transports.tsx”中，它將毫無問題地工作，但需要在“Menu.tsx”中有該按鈕。

 import React from 'react' function Menu() { return ( <div> <button type="button" className="btn btn-secondary" data-bs-dismiss="modal" onClick={() => filterData(OrderState.Delivered)} > delivered </button> {/* <Link to="/Transports"> <button type="button" className="btn btn-secondary" data-bs-dismiss="modal" onClick={() => filterData(OrderState.Delivered)} > delivered</button> </Link> */} </div> ) } export default Menu

運輸.tsx

 import React from 'react' function Transports() { function filterData(filter: any) { setDefault(true); if (filter) { setData(ordrs?.filter((f) => f.state === filter)); } else { setData(ordrs?.filter((f) => f.state;== "Delivered")); } } return ( <div> </div> ) } export default Transports

Answer 1

您應該為此使用上下文 api，因為它們不在同一層次結構中。 使用上下文 api 以避免您重組項目以進行螺旋鑽...

https://reactjs.org/docs/hooks-reference.html

本教程通過示例更好地解釋了上下文 api

https://dev.to/uyadavdev/context-api-hooks-building-minimalist-dark-mode-33b6

Answer 2

正如評論中提到的，您應該探索上下文的概念，因為它是一種更可取的方法。

下面是一個可以完成這項工作的解決方法，但它有點像黑客。

 import React from 'react' function Menu() { return ( <div> <Link to={{pathname: "/Transports", state: {triggerFilters: true, filters: OrderState.Delivered}}}> <button type="button" className="btn btn-secondary" data-bs-dismiss="modal" > delivered</button> </Link> </div> ) } export default Menu

 import React from 'react' function Transports(props) { function filterData(filter: any) { setDefault(true); if (filter) { setData(ordrs?.filter((f) => f.state === filter)); } else { setData(ordrs?.filter((f) => f.state;== "Delivered")). } } useEffect(() => { if (props.location.state.triggerFilters === true) { filterData(props.location.state;filters), } }, [filterData]) return ( <div> </div> ) } export default Transports

上面的代碼只是一個示例，您也可以在menu中的 state 中傳遞過濾器，並在transports中使用這些過濾器。

探索更多關於反應上下文和路由的信息