Reactjs中如何从子组件调用父容器函数

Question

我的应用程序由用户呈现动态图块，需要根据外部配置重新排列图块，StyleWrapper 需要是一个通用的容器组件，也可以在其他项目中使用。以下是我们的 UI 组件结构：

<StyleWrapper>
 <Header />
 <Content>
  <PortletTiles />
 </Content>
</StyleWrapper>

鉴于上述结构，我在 StyleWrapper.tsx 中有一个名为 arrangeTiles() 的函数，它根据外部配置排列图块。

我的问题是如何从子组件调用 arrangeTiles() 函数 PortletTiles.tsx

StyleWrapper.tsx --> Parent Wrapper Container 组件

function StyleWrapper(props:any) {
  let arrangeTiles= () => {  
    // Arrange Tile logic
  };
  return (
    <div id="cnplStyleWrapper">
        {props.children}
    </div>
  );
}

export default StyleWrapper;

PortletTiles.tsx --> 子组件

function PortletTiles(props:any) {
  let addNewTile= () => {  
    // Some logic to render tile here.. then 
    // How to call parent container's arrangeTiles function?
  };
  return (
    <div>
        <button onClick={addNewTile}>Add Tile</button>
    </div>
  );
}
export default PortletTiles;

Answer 1

您可以创建一个 context 并将函数或任何其他道具作为 value 传递。 useContext 可用于使用提供者传递的 value。

type ContextValue = {
  arrangeTiles: () => void;
};

const Context = createContext<ContextValue>({
  arrangeTiles: () => {}
});

const StyleWrapper: FC = (props) => {
  let arrangeTiles = () => {
    // Arrange Tile logic
    alert("Tiles have been arranged!");
  };
  return (
    <Context.Provider value={{ arrangeTiles }}>
      <div id="cnplStyleWrapper">{props.children}</div>
    </Context.Provider>
  );
};

const PortletTiles: FC = (props) => {
  const { arrangeTiles } = useContext(Context);

  let addNewTile = () => {
    arrangeTiles();
  };
  return (
    <div>
      <button onClick={addNewTile}>Add Tile</button>
    </div>
  );
};

export default function App() {
  return (
    <StyleWrapper>
      <PortletTiles />
    </StyleWrapper>
  );
}

如果您的应用已经使用了 redux，那么您可以将 arrangeTiles 移动到 reducer 并从组件中调度操作。

Answer 2

最简单的方法是使用上下文 API。这使您能够拥有可以跨不同组件引用和操作的状态。您可以参考上下文文档 API here.

import { createContext } from "react";

const AppContext = createContext();

const AppProvider = (props) => {
  

  const arrangeTiles = () => {
    // place function code here
  };

  return (
    <AppContext.Provider value={{arrangetiles}}>
      {props.children}
    </SiteContext.Provider>
  );
};

const AppConsumer = AppContext.Consumer;

export { AppContext, AppConsumer };

export default AppProvider;

在 AppProvider 中包装您的应用程序组件

在子组件中，需要引入rearrangeTiles函数才能使用：

import { useContext } from "react";

const { rearrangeTiles } = useContext(AppContext);

Reactjs中如何从子组件调用父容器函数

How to call Parent containers function from child component in Reactjs

reactjs

react-redux

react-hooks