如何在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} />
 )
}