Question

我正在研究React应用程序并制作类似框架的东西，其中我有一个包装器组件，就像这样。

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>
     )
  } 
}

并像这样使用它：

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>
    )
  } 
}

所以在这里，我希望子组件通过更新子子句componentWillReceiveProps()或调用其子方法，从父包装器组件接收数据。

Answer 1

您最好的选择是使用HOC - 更高 - https://reactjs.org/docs/higher-order-components.html

React.JS从Parent Wrapper Component调用childs组件方法

1 个答案: