javascript - react calling a function in a child component - Stack Overflow

admin管理员组

文章数量:1300203

Im trying to call a function that is stored in a child ponent form the parent. But not sure to to do it. I know if were form child to parent I could simply use the ponent props but not sure how to do it from parent to child.

as you can see form the below example the button in the parent class need to trigger the display function in the child class.

var Parent = React.createClass ({
   render() {
       <Button onClick={child.display} ?>
   } 
})


var Child = React.createClass ({
    getInitialState () {
        return {
            display: true
        };
    },


    display: function(){
        this.setState({
             display: !this.state.display
        })
    },

    render() {
     {this.state.display}
    } 
})

Im trying to call a function that is stored in a child ponent form the parent. But not sure to to do it. I know if were form child to parent I could simply use the ponent props but not sure how to do it from parent to child.

as you can see form the below example the button in the parent class need to trigger the display function in the child class.

var Parent = React.createClass ({
   render() {
       <Button onClick={child.display} ?>
   } 
})


var Child = React.createClass ({
    getInitialState () {
        return {
            display: true
        };
    },


    display: function(){
        this.setState({
             display: !this.state.display
        })
    },

    render() {
     {this.state.display}
    } 
})

• javascript
• reactjs

Share Follow edited Feb 23, 2016 at 11:44 chinds asked Feb 23, 2016 at 11:26 chindschinds 1,82955 gold badges2929 silver badges5858 bronze badges 3

• How do you define them as parent and child if Parent never renders Child? – shivam Commented Feb 23, 2016 at 12:00
• I just wrote a basic example up there, my actual code does render the child. – chinds Commented Feb 23, 2016 at 12:18
• 1 @chinds there is a good answer below, but it would be helpful if you could edit your example code so that it does include the Child ponent. Presumably, replacing Button with Child will do the trick. This would make it easier for people to understand both the problem and the suggested answer. – brennanyoung Commented Apr 23, 2018 at 8:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

The easiest way to achieve this is through using refs(See documentation).

var Parent = React.createClass ({

   triggerChildDisplay: function() {
       this.refs.child.display();
   },

   render() {
       <Button onClick={this.triggerChildDisplay} />
   } 
})


var Child = React.createClass ({
    getInitialState () {
        return {
            display: true
        };
    },


    display: function(){
        this.setState({
             display: !this.state.display
        })
    },

    render() {
     {this.state.display}
    } 
})

I basically copied in your example, but do note that in your Parent, I don't see you render a Child ponent, but typically, you would, and on that Child you would give it a ref, like <Child ref="child" />.

I don't believe it is possible to call a child function from a parent ponent.

For this use case there is a better way to achieve this result and that is by setting the 'display' property of the child ponent to the value of a prop passed to it by the parent, eg.

var Parent = React.createClass ({
    getInitialState() {
        return {displayChild: false};
    },

    toggleChildDisplay() {
        this.setState({
            displayChild: !this.state.displayChild
        });
    },

    render() {
        <Button onClick={this.toggleChildDisplay} />
        <Child display={this.state.displayChild} />
    }
});

var Child = React.createClass ({
    render: function() {
        if (this.props.display) {
            /*return ponent*/
        } else {
            /*Don't render*/
        }
    }
});

本文标签： javascriptreact calling a function in a child componentStack Overflow