Question

angular2 在不确定父组件的情况下，子组件怎么调用父组件的方法

Answer 1

1、页面中首先引入相关 js
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<script src="js/jquery.min.js"></script>

2、此例子中:table组件为父组件，弹层组件为子组件
3、html代码
<div id="showHide"></div>
4、js代码

//列表组件
var PopShow = React.createClass({
getInitialState: function() {
return {
hideParent: false,
id:null
};
},

deleteClick:function(data){
console.log(this.state.hideParent);
this.setState({
hideParent:!this.state.hideParent,
id:data
});
},
cancelClick:function(){
this.setState({
hideParent: !this.state.hideParent
});
},
sureClick:function(){
this.setState({
hideParent: !this.state.hideParent
});
console.log(this.state.id);
//也可进行异步方法调用
},
render:function (){
return(
<div>
<table className="tab"><thead><tr><td>序号</td><td>名称</td><td>操作</td></tr></thead><tbody>
<tr><td>1</td><td>海南大学</td><td> <button onClick={this.deleteClick.bind(this,"11")}>删除</button></td></tr>
</tbody></table>
{this.state.hideParent ?<PopAlert callbackParentSure={this.sureClick} callbackParentCancel={this.cancelClick}/>:null}
</div>

);
}
});

ReactDOM.render(
<PopShow />,
document.getElementById('showHide')
);

//弹层组件
var PopAlert = React.createClass({
childCancel:function(){
this.props.callbackParentCancel();
},
childSure:function(){
this.props.callbackParentSure();
},
render: function() {
return <div className="pop"><div><h4>确定删除?</h4>
<button onClick={this.childCancel}>取消</button><button onClick={this.childSure}>确定</button>
</div></div>
}
});
5、页面效果