从reactjs中的父组件调用并将参数传递给子组件的函数

Posted 2023-02-22

【中文标题】从reactjs中的父组件调用并将参数传递给子组件的函数

【英文标题】：calling and pass arguments to children component's function from parent component in reactjs

【发布时间】：2017-03-28 05:22:29

【问题描述】：

我发现我通过 refs 从父组件传递到子组件的参数要么是未定义的，要么是实际事件，而不是我传入的。

真正将参数从父组件传递到子组件函数的正确方法是什么？我正在使用refs，但在函数参数方面似乎并没有真正传递任何东西。

我在这里展示这个案例： https://codepen.io/adamchenwei/pen/gLMaPo/?editors=0010

基本上，如果您看到我写console.log('child argument should be string'); 的那一行，那应该是实际传递的参数而不是事件。

不知道是不是我做错了。

对于这种情况，我需要评估父组件中的事件并决定如何运行子函数，并相应地传入特定参数。

【参考方案1】：

只有两种方法可以访问子组件中的父 props。您可以通过以下两种方式实现：-

通过 props 将值从父组件传递到子组件 在状态中设置值并从子级调度操作以从状态中获取值。

【参考方案2】：

我会使用 state 和 props，而不是使用 ref：

parentDoThing(event) 
    const lifeTerms = 
      heaven: 'yeeeeey',
      hell: 'nooooooo',
    
    if(event) 
      this.setState( lifeTerms: heaven );
     else 
      this.setState( lifeTerms: hell);
    


render()     
    return (
      <section className="parent-comp"
        onClick=this.parentDoThings>
        <ChildComponent
          lifeTerms=this.state.lifeTerms/>
        <h1> Whats in App this.state.text</h1>
      </section>
);

在子组件上：

render()     
    return (
      <section className="child">
        <section>this life is this.state.life </section>
        <button onClick=this.doChildThings.bind(this, this.props.lifeTerms)> Button </button>
      </section>
    );

【参考方案3】：

通过使用componentWillUpdate 结合使用父级别state 作为props 传递给子级来触发子级内部的事件，解决了我的问题，因为我不希望子级内部的任何触发器触发由父母。