如何在reactjs中調用無狀態功能組件內部的函數

Question

這是我的問題，我想從 MyTable.js 調用函數刷新到 MyPage.js

MyTable.js

const MyTable = (props) => {

 //Some state

 const refresh = () => {//Do Refresh}
 
 return(<Table/>);
}

export default MyTable;

我的頁面.js

const MyPage = (props) => {
 //Some state

 const handleRefresh = () => {
  //How to call refresh of MyTable here?
 }

 return(
  <Button onClick={handleRefresh} >Refresh</Button>
  <MyTable />
 )
}

//我想要一個類似這樣的解決方案，但我不知道如何實現

const MyPage = (props) => {
 //Some state
const [myTable] = MyTable.useMyTable();

 const handleRefresh = () => {
  myTable.refresh();
 }

 return(
  <Button onClick={handleRefresh} >Refresh</Button>
  <MyTable table={myTable} />
 )
}

Answer 1

有一種方法可以做到，但不強烈推薦。

你可以像下面這樣

MyTable.js

const MyTable = (props) => {

 props.refresh(() => {
    // DO Refresh
 });

 return(<Table/>);
}

export default MyTable;

我的頁面.js

const MyPage = (props) => {
 //Some state

 let refreshFunc = () => {};

 const handleRefresh = () => {
  //How to call refresh of MyTable here?
  refreshFunc();
 }

 return(
  <Button onClick={handleRefresh} >Refresh</Button>
  <MyTable refresh={r => { refreshFunc = r; }} />
 )
}

Answer 2

嘗試打補丁如下：

const MyPage = (props) => {
 //Some state
 const [refresh, setRefresh] = useState(0);

 const handleRefresh = () => {
  setRefresh(x => x + 1);
 }

 return(
  <Button onClick={handleRefresh} >Refresh</Button>
  <MyTable dummy={refresh} />
 )
}