我们可以访问自定义函数中传递给组件的道具吗?

时间:2017-10-04 07:32:39

标签: reactjs

这可能听起来很傻,但我找不到这方面的指南。

我要做的是更改父级中名为update的变量。

并在父DOM中执行:

 <Child update={this.state.update} />

并且在孩子中而不是在渲染和返回之间(使用const {update} = this.props)并且只能在DOM中使用它,我想在构造函数和之间的部分中选择它。渲染并在那里使用它。

2 个答案:

答案 0 :(得分:3)

您可以访问组件中任何位置的props组件,无论它是constructor, lifecycle functions, render or custom functions.

您唯一需要知道的是constructor, lifecycle methods and render function已经有binding到React组件的上下文,但对于custom function,您需要自己添加绑定。绑定可以在constructor中完成,也可以将函数声明为arrow functions

检查此答案,了解您需要绑定自定义函数的原因:Why do we need to bind function and eventHandlers in React and what is the difference between the different binding methods

对于你的情况

<Child update={this.state.update} />

孩子可能在哪里

class Child extends React.Component {
    componentDidMount() {
        const {update} = this.update || {};
        console.log(update);
        this.somefunc();
    }
    somefunc = () = {
       const {update} = this.update || {};   //After function is binded, you can do the same thing here too
        console.log(update);
    }
}

答案 1 :(得分:1)

React具有在组件上调用的函数的生命周期:https://reactjs.org/docs/react-component.html

在启动组件时,您可以使用componentDidMount()

如果您想根据道具更改使用更改状态:componentWillReceiveProps()

否则,如果您希望该函数的结果用作视图中的数据(但只是被操纵)。比做一个单独的函数也称为:计算函数的计算属性。 (因为结果是根据当前状态/道具计算的)。 React将确保您不会重新渲染/计算不必要的内容。