我有两个组成部分:
父组件 子组件
我试图从Parent调用Child的方法，我尝试了这种方式，但不能得到一个结果:
class Parent extends Component {
render() {
return (
<Child>
<button onClick={Child.getAlert()}>Click</button>
</Child>
);
}
}
class Child extends Component {
getAlert() {
alert('clicked');
}
render() {
return (
<h1 ref="hello">Hello</h1>
);
}
}
是否有一种方法从父调用子方法?
注意:子组件和父组件在两个不同的文件中。
当前回答
这里是我的演示:https://stackblitz.com/edit/react-dgz1ee?file=styles.css
I am using useEffect to call the children component's methods. I have tried with Proxy and Setter_Getter but sor far useEffect seems to be the more convenient way to call a child method from parent. To use Proxy and Setter_Getter it seems there is some subtlety to overcome first, because the element firstly rendered is an objectLike's element through the ref.current return => <div/>'s specificity. Concerning useEffect, you can also leverage on this approach to set the parent's state depending on what you want to do with the children.
在我提供的演示链接中，你会发现我完整的ReactJS代码和我的草稿，所以你可以欣赏我的解决方案的工作流程。
在这里，我只提供了相关代码的ReactJS片段。：
import React, {
Component,
createRef,
forwardRef,
useState,
useEffect
} from "react";
{...}
// Child component
// I am defining here a forwardRef's element to get the Child's methods from the parent
// through the ref's element.
let Child = forwardRef((props, ref) => {
// I am fetching the parent's method here
// that allows me to connect the parent and the child's components
let { validateChildren } = props;
// I am initializing the state of the children
// good if we can even leverage on the functional children's state
let initialState = {
one: "hello world",
two: () => {
console.log("I am accessing child method from parent :].");
return "child method achieve";
}
};
// useState initialization
const [componentState, setComponentState] = useState(initialState);
// useEffect will allow me to communicate with the parent
// through a lifecycle data flow
useEffect(() => {
ref.current = { componentState };
validateChildren(ref.current.componentState.two);
});
{...}
});
{...}
// Parent component
class App extends Component {
// initialize the ref inside the constructor element
constructor(props) {
super(props);
this.childRef = createRef();
}
// I am implementing a parent's method
// in child useEffect's method
validateChildren = childrenMethod => {
// access children method from parent
childrenMethod();
// or signaling children is ready
console.log("children active");
};
{...}
render(){
return (
{
// I am referencing the children
// also I am implementing the parent logic connector's function
// in the child, here => this.validateChildren's function
}
<Child ref={this.childRef} validateChildren={this.validateChildren} />
</div>
)
}
其他回答
我尝试使用createRef或useRef。它们都返回null。
其次，这个答案提出通过一个道具来设置一个在我看来最合理的函数。但如果子组件用于多个地方，则应该将额外的道具添加到其他地方。此外，如果您想在孙辈中调用一个方法，这个方法可能太啰嗦或太冗长。
所以我用一种非常原始的方式创建了我自己的函数存储。
下面是functionStore.js文件
const fns = {};
export function setFn(componentName, fnName, fn) {
if (fns[componentName]) {
fns[componentName][fnName] = fn;
} else {
fns[componentName] = { fnName: fn };
}
}
export function callFn(componentName, fnName) {
fns[componentName][fnName]();
}
我只是设置了需要从任何组件调用的函数。
import { setFn } from "./functionStore";
export class AComponent extends React.Component {
componentDidMount() {
setFn("AComponent", "aFunc", this.aFunc);
}
aFunc = () => { console.log("aFunc is called!"); };
}
然后我从其他组件调用它
import { callFn } from "./functionStore";
export class BComponent extends React.Component {
// just call the function
bFunc = () => {
callFn("AComponent", "aFunc");
};
}
一个缺点是要调用的函数应该是无参数的。但这也可能以某种方式解决。目前，我不需要传递参数。
如果你这样做只是因为你想让Child为它的父对象提供一个可重用的trait，那么你可以考虑使用render-props来代替。
这种技术实际上把结构颠倒过来了。Child现在包装了父对象，所以我将它重命名为AlertTrait。为了保持连续性，我保留了Parent这个名字，尽管它现在已经不是一个真正的Parent了。
// Use it like this:
<AlertTrait renderComponent={Parent}/>
class AlertTrait extends Component {
// You will need to bind this function, if it uses 'this'
doAlert() {
alert('clicked');
}
render() {
return this.props.renderComponent({ doAlert: this.doAlert });
}
}
class Parent extends Component {
render() {
return (
<button onClick={this.props.doAlert}>Click</button>
);
}
}
在这种情况下，AlertTrait提供了一个或多个特征，它将这些特征作为道具传递给renderComponent道具中给定的任何组件。
Parent接收doAlert作为道具，并在需要时调用它。
(为了清晰起见，我在上面的例子中调用道具renderComponent。但在上面链接的React文档中，他们只称之为渲染。)
Trait组件可以在它的渲染函数中渲染父元素周围的东西，但它不渲染父元素内部的任何东西。实际上，如果它将另一个道具(例如renderChild)传递给父对象，父对象就可以在它的渲染方法中使用它，它就可以在父对象内部渲染东西。
这与OP要求的有些不同，但有些人可能会在这里结束(就像我们所做的那样)，因为他们想要创建一个可重用的trait，并且认为子组件是实现这一点的好方法。
在这里，我将给出四种可能的组合:
类父类|钩子子类 钩子父类|类子类 钩父钩子 类父类|类子类
1. 类父类|钩子子类
class Parent extends React.Component {
constructor(props) {
super(props)
this.myRef = React.createRef()
}
render() {
return (<View>
<Child ref={this.myRef}/>
<Button title={'call me'}
onPress={() => this.myRef.current.childMethod()}/>
</View>)
}
}
const Child = React.forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
childMethod() {
childMethod()
}
}))
function childMethod() {
console.log('call me')
}
return (<View><Text> I am a child</Text></View>)
})
2. 钩子父类|类子类
function Parent(props) {
const myRef = useRef()
return (<View>
<Child ref={myRef}/>
<Button title={'call me'}
onPress={() => myRef.current.childMethod()}/>
</View>)
}
class Child extends React.Component {
childMethod() {
console.log('call me')
}
render() {
return (<View><Text> I am a child</Text></View>)
}
}
3.钩父钩子
function Parent(props) {
const myRef = useRef()
return (<View>
<Child ref={myRef}/>
<Button title={'call me'}
onPress={() => myRef.current.childMethod()}/>
</View>)
}
const Child = React.forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
childMethod() {
childMethod()
}
}))
function childMethod() {
console.log('call me')
}
return (<View><Text> I am a child</Text></View>)
})
4. 类父类|类子类
class Parent extends React.Component {
constructor(props) {
super(props)
this.myRef = React.createRef()
}
render() {
return (<View>
<Child ref={this.myRef}/>
<Button title={'call me'}
onPress={() => this.myRef.current.childMethod()}/>
</View>)
}
}
class Child extends React.Component {
childMethod() {
console.log('call me')
}
render() {
return (<View><Text> I am a child</Text></View>)
}
}
您可以使用ref从父组件调用子组件的函数
功能组件解决方案
在函数组件中，你必须使用useImperativeHandle来获取引用到如下所示的子组件中
import React, { forwardRef, useRef, useImperativeHandle } from 'react';
export default function ParentFunction() {
const childRef = useRef();
return (
<div className="container">
<div>
Parent Component
</div>
<button
onClick={() => { childRef.current.showAlert() }}
>
Call Function
</button>
<Child ref={childRef}/>
</div>
)
}
const Child = forwardRef((props, ref) => {
useImperativeHandle(
ref,
() => ({
showAlert() {
alert("Child Function Called")
}
}),
)
return (
<div>Child Component</div>
)
})
类组件解决方案
Child.js
import s from './Child.css';
class Child extends Component {
getAlert() {
alert('clicked');
}
render() {
return (
<h1>Hello</h1>
);
}
}
export default Child;
Parent.js
class Parent extends Component {
render() {
onClick() {
this.refs.child.getAlert();
}
return (
<div>
<Child ref="child" />
<button onClick={this.onClick}>Click</button>
</div>
);
}
}
从父函数触发子函数的另一种方法是在子组件中使用componentDidUpdate函数。我将一个道具triggerChildFunc从父对象传递给子对象，初始值为null。当单击按钮时，该值更改为一个函数，Child注意到componentDidUpdate中的更改并调用自己的内部函数。
因为道具triggerChildFunc变成了一个函数，我们也得到了一个回调到父类的函数。如果Parent不需要知道函数何时被调用，则triggerChildFunc值可以从null改为true。
const { Component } = React; const { render } = ReactDOM; class Parent extends Component { state = { triggerFunc: null } render() { return ( <div> <Child triggerChildFunc={this.state.triggerFunc} /> <button onClick={() => { this.setState({ triggerFunc: () => alert('Callback in parent')}) }}>Click </button> </div> ); } } class Child extends Component { componentDidUpdate(prevProps) { if (this.props.triggerChildFunc !== prevProps.triggerChildFunc) { this.onParentTrigger(); } } onParentTrigger() { alert('parent triggered me'); // Let's call the passed variable from parent if it's a function if (this.props.triggerChildFunc && {}.toString.call(this.props.triggerChildFunc) === '[object Function]') { this.props.triggerChildFunc(); } } render() { return ( <h1>Hello</h1> ); } } render( <Parent />, document.getElementById('app') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id='app'></div>
CodePen: https://codepen.io/calsal/pen/NWPxbJv?editors=1010
