Question

我试图通过道具传递内置的反应函数并尝试设置状态，但我将this视为未定义！

我尝试过这样的事情：

index.js

let somefun = function(){
    this.setState({myvar:1});
}

ReactDom.render(<someComponent body={<someOtherComponent1 componentWillUpdate={somefun}/>} />, document.getElementById('someValidID'));

someOtherComponent1.js

React.createElement( someOtherComponent1, { "className": "someclass"} )

我的问题是每当我传递内置函数时，反应原型this中的函数总是未定义。

如何通过道具发送内置函数？

Answer 1

熟悉this并传递函数的常见问题。

tl; dr 要在setState上调用this，需要在需要更新其状态的组件内调用this。您在组件外部调用它。

someFun 是一个新功能，可以在其中调用this的函数。问题是在该上下文中，this是对someFun的引用，而不是对组件实例的引用。来吧，在那里放一个console.log(this)来看。

我认为在你的场景中onComponentWillUpdate应该是你组件内部的一个函数，而不是在它之外声明。

render: function() {
  return (
    <someOtherComponent1 onComponentWillUpdate={function(nextProps, nextState) {
       // do something here
      }}
    />
  )

但是，不要忘记你必须在你的子组件中实际调用该函数。

// in someOtherComponent1
componentWillUpdate: function(nextProps, nextState) {
  // do something
  this.props.onComponentWillUpdate(nextProps, nextState)
}

Answer 2

ReactDom.render(<someComponent body={<someOtherComponent1 yourFn={somefun}/>} />, document.getElementById('someValidID'));

和内部组件

this.props.yourFn()

反应嵌套组件传递内置函数（无通量）

2 个答案: