如何使用React从父组件访问历史支柱？

Question

我有一个方法showInfo，它由两个组件Child1和child2访问。

最初，我在Child1组件中有showInfo方法，如下所示

const Child1 = ({history}: RouteComponentProps) => {
    type Item = {
        id: string,
        name: string,
        value: string,
    };

    const showInfo = (item: item) => {
        const id = item.id;
        const value = item.value;
        const handleRouteChange = () => {
            const path = value === 'value1' ? `/value1/?item=${itemId}` : `/value2/?item=${itemId}`; 
            history.push(path);
        }

       return (
           <Button onClick={handleRouteChange}> Info </Button>
       );
   }


   return (
       <SomeComponent 
           onDone = {({ item }) => {
               notify({
                   actions: showInfo(item)
               }) 
           }}
       />
   );

}

上面的代码起作用。但现在我有另一个组件child2，它需要使用相同的方法showinfo。

组件child2如下所示

const Child2 = () => {
   return (
       <Component 
           onDone = {({ item }) => {
               notify({
                   actions: showInfo(item)
               }) 
           }}
       />
   );

}

我没有在Child2组件中编写相同的方法showInfo，而是将它放在不同的文件中，在这个文件中，child1和Child2组件可以共享showInfo方法。

下面是名为utils.tsx的文件，该文件具有showInfo方法

 export const showInfo = (item: item) => {
        const id = item.id;
        const value = item.value;
        const handleRouteChange = () => {
            const path = value === 'value1' ? `/value1/?item=${itemId}` : 
            `/value2/?item=${itemId}`; 
            history.push(path); //error here push is not identified as no 
            //history passed
        }

       return (
           <Button onClick={handleRouteChange}> Info </Button>
       );
   }


   return (
       <SomeComponent 
           onDone = {({ item }) => {
               notify({
                   actions: showInfo(item)
               }) 
           }}
       />
   );

}

通过上面的操作，我在showInfo方法中使用history.push时得到了错误。未定义推送。

这是因为在此文件utils.tsx中未定义历史记录

现在的问题是我如何从child1或child2组件传递历史记录。或者在这种情况下我可以访问历史记录的另一种方式是什么。

有人能帮我一下吗。多谢了。

Answer 1

虽然您可能会创建一个自定义钩子，但您的函数返回JSX。这里讨论了在自定义钩子中返回JSX的问题。IMO，这与其说是一个util或自定义钩子场景，不如说是一个可重用的组件。这很好！

export const ShowInfo = (item: item) => { // capitalize

   const history = useHistory(); // use useHistory

   // ... the rest of your code

}

现在在Child1和child2中：

return (
  <SomeComponent 
    onDone = {({ item }) => {
      notify({
        actions: <ShowHistory item={item} />
      }) 
    }}
  />
);

您可能必须根据ondone属性和notify函数调整一些代码，但这种模式提供了您所要寻找的可重用行为。