时间戳

首页 > 解决方案 > 从父组件中找出子组件挂载在react中

reactjs - 从父组件中找出子组件挂载在react中

问题描述

我有一个反应组件，它有一个子组件。我必须在父组件中知道子组件已安装。怎么做？

标签： reactjscomponents

解决方案

这取决于您使用的 React 版本。

如果您使用的是 React 16.8 或更高版本，您可以在子组件中使用 useEffect 挂钩，该挂钩可以触发父组件中的功能。

const Parent = props => {
 const OnChildMount = () => {
  console.log('Child Mounted);
 }
 return (
  <Child onMount={OnChildMount}/>
 )
}

const Child = props => {
 useEffect(() => {
  props.onMount();
 }, []);

 return (
  //The child JSX
 );
}

useEffect 挂钩中的空括号 [] 确保它仅在安装子组件时运行。

如果您使用的是旧版本的 React，您可以使用子组件中的 ComponentDidMount 生命周期钩子来触发父组件中的相同功能。

话虽这么说，最终的解决方案实际上取决于您的确切要求。

推荐阅读