Question

如果我们使用带有参数的函数，并且想将此函数用作其他组件的道具，而当我尝试在其他组件中console.log(this.props)时，我将无法定义。

         anotherfunctionCall = (ss) =>  {
               console.log(ss) 
          }

     <DrawerRight
        anotherfunctionCall = {this.anotherfunctionCall('some')}

      />

当我在其他组件中控制台（this.props）时，我不确定。请帮助解决此问题。如果我使用anotherfunctionCall =（ss）=>（）=> { console.log（ss） } 工作正常

Answer 1

以现在的方式传递道具不会传递函数，而是在呈现父组件的那一刻调用它。

相反，将您的代码更改为此：

 <DrawerRight
    anotherfunctionCall={() => this.anotherfunctionCall('some')}
  />

然后从DrawerRight组件中，将其用作：

props.anotherfunctionCall();

或者，如果您想使用自定义prop从DrawerRight组件中调用此函数，请将代码更改为：

 <DrawerRight
    anotherfunctionCall={this.anotherfunctionCall}
  />

然后在DrawerRight中使用它：

props.anotherfunctionCall('some other text');

Answer 2

尝试使用这种箭头功能

anotherfunctionCall={() => this.anotherfunctionCall('some')}

Answer 3

我不确定这是否是您要寻找的答案，但是，您将作为道具的函数传递给没有任何参数的组件。您只需要传递函数引用，就可以从带有或不带有props的子组件中调用它。（无论您如何定义）

anotherfunctionCall = (ss) =>  {
               console.log(ss) 
          }

     <DrawerRight
        anotherfunctionCall = {this.anotherfunctionCall}

      />

//DrawerRight.js

...

componentDidMount(){
  this.props.anotherfunctionCall("test");
}

...

Answer 4

很少有很好的方法来执行此操作而不会导致性能损失，

情况1 ：当您知道子组件中的参数值

    anotherfunctionCall = (ss) =>  {
        console.log(ss) 
    }

     <DrawerRight
        anotherfunctionCall = {this.anotherfunctionCall}
      />

// DrawerRight

this.props.anotherFunctionCall('some')

情况2 ：如果您不知道子组件中的参数值，请使用绑定函数来防止不必要的重新渲染，

    constructor() {
       this.anotherFunctionCallSome = this.anotherFunctionCall.bind(null, 'some')
    }

    anotherfunctionCall = (ss) =>  {
        console.log(ss) 
    }

     <DrawerRight
        anotherfunctionCall = {this.anotherfunctionCallSome}
      />

// DrawerRight

this.props.anotherFunctionCall();

情况3 ：当参数值不固定且根据状态而变化时，请使用内联lambda / arrow函数

     <DrawerRight
        anotherfunctionCall = {() => this.anotherfunctionCall(this.state.someValue)}
      />

如何在react

4 个答案: