React父组件间接调用子组件方法—函数式写法(useState、useEffect)

2022-04-04

React父组件间接调用子组件方法，如果用现在流行的函数式写法，可借助useState、useEffect，根据状态变化进行沟通。

原理很简单，父组件定义一个状态值flag，业务事件触发时，更新状态，子组件监听状态值flag的变化，处理相应的逻辑。

react_logo

父组件Parent.jsx

import React, { useState } from 'react';
import Child from './Child';

function Parent(props) {
	const [flag, setFlag] = useState(false);
	const onClick = e => {
		setFlag(Date.now());
	}
    return (
    	<>
    		<div>
				<button onClick={onClick}>触发子组件方法</button>
				<Child flag={flag}/>
    		</div>
		</>
    )
}

子组件Child.jsx

import React, { useEffect } from 'react';

function Child(props) {

	useEffect(() => {
		if (props.flag) {
			// 自定义逻辑	
		}
	}, [props.flag]);

    return (
    	<>
    		<div>
				Child
    		</div>
		</>
    )
}

React父组件调用子组件方法，感觉是一个很常用的功能，但网上查了许多资料，要么是class形式，要么是过于复杂，短时间内没看到什么简单有效的方法。-.-

仅供参考，未必是最优解，适用于小部分需求。

（版权归cpury.com所有，转载请注明出处。）

WEB开发