将 onclick 函数作为参数传递给 react/typescript 中的另一个组件

Question

这里是新的 Reactjs(Hooks) 开发人员，我的问题是：我现在在 Menu.tsx 中，我想单击该按钮，它应该会影响“Transports.tsx”中的另一个组件，我已经编写了两种方法（不知道如何使它们工作），一种方法是普通按钮并单击它，另一种方法是将它们添加到 '' 中。如果我将该按钮放在同一个组件“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

Transports.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

正如评论中提到的，您应该探索上下文的概念，因为它是一种更可取的方法。

下面是一个可以完成这项工作的解决方法，但它有点像 hack。

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 的状态下传递过滤器，并在transports 中使用这些过滤器。

进一步了解反应上下文和路由

Answer 2

您应该为此使用上下文 api，因为它们不在同一层次结构中。使用上下文 api 来避免您重组项目以进行道具钻孔...

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

本教程通过示例更好地解释上下文 api

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