Question

我具有以下布局，并且在此布局中，正在呈现“路线”页面。

 const Layout = () => {
     return (
         <main className="fadeIn animated">
               { this.props.children }
       </main>
    )
  }

return (
 <React.Fragment>
    <Layout callFunction={ () => console.log('callFunction') }/>

 {/*I will set the state using callFunction Function and then pass in modal*/}

    <Modals data={this.state}/>
 </React.Fragment>
)

使用路由在子对象内部呈现的页面如下

class Page extends React.Component {
    return (
                <React.Fragment>
                    ROUTE PAGE IS . I would like to call callFunction from here
      <button onClick={parent.callFunction}>CALL</button>
                </React.Fragment>
        )

}

我想从reactjs的子页面中调用布局组件的callFunction函数

Answer 1

如果我对您的理解正确，那么您希望“布局”运行“ loadLayout”功能如果是这样，只需让Layout知道它正在接收什么

 const Layout = ({loadLayout}) => {
   loadLayout()
   return (
     <main className="fadeIn animated">
           { this.props.children }
   </main>
  )
}

我不确定这是您的意思，我们需要更多信息，谁来加载谁

从React中的路由this.props.children调用Parent函数

1 个答案: