从父级调用子级方法

JavaScript

SamJinJin路易

2020-03-09

我有两个组成部分。

  1. 父组件
  2. 子组件

我试图从父级调用孩子的方法,我尝试过这种方法,但没有得到结果

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>
    );
  }
}

有没有一种方法可以从父级调用子级的方法?

注意:子组件和父组件位于两个不同的文件中

第359篇《从父级调用子级方法》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

5个回答
Tom西门 2020.03.09

您可以通过这种方式轻松实现

脚步-

  1. 在父类的状态中创建一个布尔变量。当您要调用函数时,请对此进行更新。
  2. 创建一个prop变量并分配布尔变量。
  3. 从子组件使用props访问该变量,并通过使用if条件执行所需的方法。

    class Child extends Component {
       Method=()=>{
       --Your method body--
       }
       render() {
         return (
        //check whether the variable has been updated or not
          if(this.props.updateMethod){
            this.Method();
          }
         )
       }
    }
    
    class Parent extends Component {
    
    constructor(){
      this.state={
       callMethod:false
      }
    
    }
    render() {
       return (
    
         //update state according to your requirement
         this.setState({
            callMethod:true
         }}
         <Child updateMethod={this.state.callMethod}></Child>
        );
       }
    }
    
小小猿 2020.03.09

我认为最基本的方法调用方法是在子组件上设置请求。然后,一旦子级处理了请求,它将调用一个回调方法来重置请求。

重置机制对于能够多次发送相同的请求是必需的。

在父组件中

在父级的render方法中:

const { request } = this.state;
return (<Child request={request} onRequestHandled={()->resetRequest()}/>);

父级需要2种方法,以便在2个方向上与其子级进行通信。

sendRequest() {
  const request = { param: "value" };
  this.setState({ request });
}

resetRequest() {
  const request = null;
  this.setState({ request });
}

在子组件中

孩子会更新其内部状态,复制道具的请求。

constructor(props) {
  super(props);
  const { request } = props;
  this.state = { request };
}

static getDerivedStateFromProps(props, state) {
  const { request } = props;
  if (request !== state.request ) return { request };
  return null;
}

然后,最后它处理请求,并将重置发送给父级:

componentDidMount() {
  const { request } = this.state;
  // todo handle request.

  const { onRequestHandled } = this.props;
  if (onRequestHandled != null) onRequestHandled();
}
ASamJim 2020.03.09

您可以进行继承反转(在此处查找:https : //medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e)。这样,您就可以访问要包装的组件的实例(因此您将可以访问其功能)

Stafan飞云Sam 2020.03.09

我正在使用useEffect钩子来克服这样做的麻烦,所以现在我将变量传递给孩子,如下所示:

<ParentComponent>
 <ChildComponent arbitrary={value} />
</ParentComponent>
useEffect(() => callTheFunctionToBeCalled(value) , [value]);
泡芙村村Pro 2020.03.09

https://facebook.github.io/react/tips/expose-component-functions.html 有关更多答案,请参考此处在React子组件上调用方法

通过查看“原因”组件的引用,您正在破坏封装并使您无法仔细检查组件的所有使用位置就无法重构该组件。因此,我们强烈建议将ref视为组件的私有对象,就像state一样。

通常,数据应通过道具传递到树下。有一些例外(例如,调用.focus()或触发一次不会真正“改变”状态的一次性动画),但是每当您公开称为“ set”的方法时,道具通常更好的选择。尝试使其内部输入组件担心其大小和外观,以便其祖先都不做。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android