Question

我试图从父组件中调用存储在子组件中的函数。但不确定要这样做。我知道如果是父母的形式孩子，我可以简单地使用组件道具，但不知道如何从父母到孩子。

从下面的示例中可以看到，父类中的按钮需要触发子类中的显示功能。

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}
    } 
})

Answer 1

实现这一目标的最简单方法是使用refs。

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}
    } 
})

我基本上复制了你的例子，但请注意，在你的父母中，我没有看到你渲染一个儿童组件，但通常，你会，并且在那个孩子上你会给它一个参考，如{ {1}}。

Answer 2

我不相信可以从父组件调用子函数。

对于这个用例，有一种更好的方法来实现这个结果，那就是通过将子组件的'display'属性设置为父组件传递给它的prop的值，例如。

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 component*/
        } else {
            /*Don't render*/
        }
    }
});

响应调用子组件中的函数

2 个答案: