###
React 中
父组件调用子组件方法的最佳实践
在
React 的开发实践中，
父组件调用子组件的
方法是一种常见的需求场景。以下是几种主流的实现方式及其适用范围：
####
方法一：使用 `
React.createRef`
调用子组件方法
对于类组件而言，可以通过创建一个 Ref 来访问
子组件实例，并进而
调用其公开的
方法。这种方式简单直观，适用于需要直接操作
子组件的情况。
```javascript
// ParentComponent.js
import
React from '
react';
import ChildComponent from './ChildComponent';
class ParentComponent extends
React.Component {
constructor(props) {
super(props);
this.childRef =
React.createRef();
}
callChildMethod = () => {
if (this.childRef.current) {
this.childRef.current.someChildMethod(); //
调用子组件方法
}
};
render() {
return (
<div>
<button onClick={this.callChildMethod}>Call Child Method</button>
<ChildComponent ref={this.childRef} />
</div>
);
}
}
export default ParentComponent;
// ChildComponent.js
import
React from '
react';
class ChildComponent extends
React.Component {
someChildMethod = () => {
console.log('Child method was called');
};
render() {
return <div>Child Component</div>;
}
}
```
此
方法利用了 `
React.createRef()` 创建了一个 Ref 实例[^1]，并通过它获取
子组件实例上的公共
方法。
---
####
方法二：通过 Props 回调机制间接
调用
另一种常见的方式是在
子组件挂载完成后，将其自身的引用传递给
父组件。这样可以使得
父组件能够存储该引用以便后续
调用。
```javascript
// Child.js
import
React, { Component } from '
react';
class Child extends Component {
componentDidMount() {
this.props.onChildEvent(this); // 将
子组件实例传递给
父组件
}
sendMessage = () => {
console.log('Message sent from child component');
};
render() {
return <span>Child</span>;
}
}
export default Child;
// Parent.js
import
React, { Component } from '
react';
import Child from './Child';
class Parent extends Component {
handleChildInstance(childInstance) {
this.childInstance = childInstance;
}
callChildMethod = () => {
if (this.childInstance && typeof this.childInstance.sendMessage === 'function') {
this.childInstance.sendMessage(); //
调用子组件方法
}
};
render() {
return (
<div>
<button onClick={this.callChildMethod}>Call Child Method</button>
<Child onChildEvent={this.handleChildInstance.bind(this)} />
</div>
);
}
}
export default Parent;
```
这种模式允许
父组件保存对
子组件实例的引用，从而可以在任何时间点
调用子组件暴露的
方法[^3]。
---
####
方法三：借助 Context API 进行跨层通信
当涉及到更深层次嵌套或者多个兄弟组件之间的交互时，Context 提供了一种优雅的方式来共享状态或行为逻辑。在这种情况下，
父组件可以通过上下文向子孙节点广播自己的能力，而无需显式地逐级传递 props。
```javascript
// Context.js
import
React from '
react';
const MethodContext =
React.createContext();
// ChildComponent.js
import
React from '
react';
import { MethodContext } from './Context';
class ChildComponent extends
React.Component {
render() {
return (
<MethodContext.Consumer>
{(callParentMethod) => (
<button onClick={() => callParentMethod()}>
Call Parent Method
</button>
)}
</MethodContext.Consumer>
);
}
}
export default ChildComponent;
// ParentComponent.js
import
React from '
react';
import ChildComponent from './ChildComponent';
import { MethodContext } from './Context';
class ParentComponent extends
React.Component {
handleParentMethod = () => {
console.log('Parent method called from child');
};
render() {
return (
<MethodContext.Provider value={this.handleParentMethod}>
<ChildComponent />
</MethodContext.Provider>
);
}
}
export default ParentComponent;
```
这里展示了如何通过定义自定义上下文来简化父子间以及深层结构间的通讯流程[^2]。
---
####
方法四：函数组件中的 Imperative Handle
如果项目主要基于函数组件构建，则可考虑结合 hooks 如 `useImperativeHandle` 和 `forwardRef` 来达到相同效果。
```javascript
// Child.js
import
React, { forwardRef, useImperativeHandle } from '
react';
const Child = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
func: () => {
console.log('Function inside the child component.');
},
}));
return <p>This is a functional child.</p>;
});
export default Child;
// Parent.js
import
React, { useRef } from '
react';
import Child from './Child';
const Parent = () => {
const childRef = useRef(null);
const handleClick = () => {
if (childRef.current?.func) {
childRef.current.func(); //
调用子组件方法
}
};
return (
<>
<button onClick={handleClick}>Invoke Child Function</button>
<Child ref={childRef} />
</>
);
};
export default Parent;
```
这段代码片段说明了即使在函数式编程范式下也能灵活运用 imperative APIs 完成特定任务[^4]。
---
### 总结
每一种技术都有各自的优势和局限性，在实际应用过程中应根据具体业务需求选择最合适的解决方案。通常来说，推荐优先尝试声明式的 prop 或 state 更新策略；只有确实必要才采用命令式的 refs 接口。
本文介绍在React中，不使用Redux的情况下，父组件如何调用子（孙）组件的方法或属性。通过实例演示了如何在父组件中定义一个拿子组件返回值的函数，并在子组件的componentDidMount生命周期方法中，通过props接收父组件传来的引用。
扫一扫
960
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
