Reactjs 从子对象调用切换函数

pages/index.js，在{children（）}的上述模板文件中呈现

类HomeIndex扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleToggleVideoModel=this.handleToggleVideoModel.bind（this）
}
render（）{
返回(
{siteTitle}
)
}
}
HomeIndex.propTypes={
onToggleVideoModel:React.PropTypes.func
}
导出默认HomeIndex

组件/Banner.js

class HomeIndex extends React.Component {

constructor(props) {
    super(props);
    this.handleToggleVideoModel = this.handleToggleVideoModel.bind(this)
}
render() {
return (
        <div>
            <Helmet>
                <title>{siteTitle}</title>
                <meta name="description" content={siteDescription} />
            </Helmet>

            <Banner onToggleVideoModel= 
{this.props.handleToggleVideoModel}/>
        )
    }

}
HomeIndex.propTypes = {

onToggleVideoModel: React.PropTypes.func
}

export default HomeIndex

const横幅=（道具）=>(

)
导出默认横幅

我怎么能不这样做呢？ 我想从Banner.js调用handleToggleVideoModel，它是layout/index父layuts/index.js的孙子。 子页面/index.js 孙子组件/Banner.js

---

我深陷其中，任何人都知道如何从Banner建议我的解决方案中访问handleToggleVideoModel。

将方法引用从组件1传递到组件2，如下所示：

const Banner = (props) => (
<section id="banner" className="major">
    <li><a href="javascript:void(0);" className="button next" onClick= 
{props.onToggleVideoModel}>Watch video</a></li>
</section>
)
export default Banner

<Component 4 toggle={this.props.handleToggleVideoModel} />

---

只需使用GetsBy将此函数作为props传递给子组件am，其中有layout/index，js包含此函数，它们const{children}=this.props接受children并呈现{children（）}这个呈现包含我的组件2和组件2内部的HomeIndex.js文件，在Banner中我已经做了

现在这将把我带到组件2，而不是布局，它是parent2简言之，我如何将{Childern}传递到组件2呢？他们不只是调用{Childern}和Childern render\compent2

<Component 2  toggle={this.handleToggleVideoModel}/>

<Component 4 toggle={this.props.handleToggleVideoModel} />

this.props.handleToggleVideoModel