首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >React.JS调用父包装组件中的子组件方法

React.JS调用父包装组件中的子组件方法
EN

Stack Overflow用户
提问于 2018-02-06 19:03:47
回答 1查看 87关注 0票数 0

我正在开发React应用程序,并制作了一个类似于框架的东西,其中我有一个包装器组件,类似这样的东西。

代码语言:javascript
复制
class FrameworkComponent extends React.Component {
  someFunction() {
    // send data to child data using childs function
    // something like this.some.thing.childFunction("mydata");
    ...
  }
  render() {
    return (
       <div>
        <div><button onClick={this.someFunction}>Click me</button></div>
        <div>{this.props.child}</div>
       </div>
     )
  } 
}

并像这样使用它:

代码语言:javascript
复制
class SecondComponent extends React.Component {
  childFunction(dataRecived) {
    alert(dataRecived);
  }
  render() {
    return <div>Hello world</div>;
  }
}

import FrameworkComponent from '../FrameworkComponent';
import SecondComponent from '../SecondComponent';

class OtherComponet extends React.Component {
  render() {
    return (
      <div>
        <FrameworkComponent>
          <div><SecondComponent /></div>
        </FrameworkComponent>
      </div>
    )
  } 
}

因此,在这里,我希望子组件通过更新它的子props:componentWillReceiveProps()或调用它的子方法从父包装组件接收数据。

EN

回答 1

Stack Overflow用户

发布于 2018-02-06 19:20:28

最好的方法是使用HOC - Higher - https://reactjs.org/docs/higher-order-components.html

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/48641497

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档