Question

export class Foo extends React.Component {
  public render() {
    return <div>{this.props.children}</div>
  }

  public myFunc = () => {
    // does some operation
  }
}

export class Bar extends React.Component {
  public render() {
    return <div>Bar Component</div>
  }

  // Trying to call Foo's myFunc in here
}

如果我有上述两个React组件，我该如何在Foo中调用myFunc的{{1}}函数？请注意，在这种情况下，Bar充当Foo的父级。

编辑：

我在我的Foo.tsx文件中做了类似的事情

Bar

然后export const myFunc = () => { // does some operation } export class Foo extends React.Component { public render() { return <div>{this.props.children}</div> } } Bar`。这有效，但我想知道这是否是正确的方法。

Answer 1

像这样：

export class Foo extends React.Component {
  render() {
    return <div>
              <Bar passedFunc={this.myFunc} />
           </div>
  }

  myFunc = () => {
    // does some operation
  }
}

export class Bar extends React.Component {
  render() {
    return <div onClick={this.props.passedFunc}>Bar Component</div>
  }
}

希望这样可以更容易地进行概念化，但是如果您通过this.props.children调用很难设置传递道具，则可以在Foo的渲染功能中执行此操作。

const { children } = this.props;

const childrenWithProps = React.Children.map(children, child =>
  React.cloneElement(child, { myFunc: this.myFunc }));

return <div>{childrenWithProps}</div>

在React中调用另一个组件的公共方法

1 个答案: