使用Reactjs中的子实例调用父函数

Question

我有两个组件，父组件使用子组件创建dom。最后创建了更多和两个子组件。

创建子组件时，在父组件中声明的Click Event将作为道具传递。我希望孩子用它的实例来唤起这个功能。

但我面临的问题是，当点击事件从孩子身上唤起时；该实例将来自最后一个子实例。

请看一下代码，让我知道哪里出错了

    var AccordionControl = React.createClass({
    handleClick: function (event) {
        event.preventDefault();
        this.refs["accordionHeaderComponent"].toggleHeaderDisplay(true);
    },

    createMenuElement: function (menuContentProps, index) {
        var boundClick = this.handleClick.bind(this, index);
        var headerContent = <MenuHeader key = {index}
        clickEvent = {boundClick}
        ref = "HeaderComponent"
        menuHeaderProps = {menuItemProps}
        />;
     },
    render: function(){
                for(var index=0; index<menuData.length; index++) {
                       wrapperContent.push(this.createMenuElement(menuData[index],index));
                }
                return wrapperContent;
    }})
    var MenuHeader = React.createClass({
    render: function () {
      var menuHeaderProps = this.props.menuHeaderProps;
      return  <div onClick={this.props.clickEvent} > </div >
    }
})

Answer 1

我得到了解决方案：）这里的问题是我在循环中使用"refs"作为字符串，这被循环中的以下组件重写了。

因此，被替换的Last元素将在调用中。如果将"Refs"替换为动态字符串，如ref={"HeaderComponent"+index}然后您将有组件集合可供选择：）

然后这将是 var componentKey = "accordionHeaderComponent1"; this.refs[componentKey ].toggleHeaderDisplay(true);