Question

如果我有基于类的组件：

const App = () => {
    if (userHasNotAccess) {
        return <ErrorPage />;
    }

    return (
        <Admin {...props}>
            {/* ... */}
        </Admin>
    );
};

将以下内容合并到DOM中：

class MyComponent extends React.Component {
    state = {...}
    constructor(props) {...}
    functionIWantToCall() {...}
    render() {...}
}

有没有一种方法可以从<div id="parent-div-with-controls"> .... (some control elements) .... <MyComponent {...props}/> </div>调用MyComponent中定义的方法？

我正在想像这样的“反应等效”（如果存在）：

parent-div-with-controls

或者，这是我在React中永远不想做的事情吗？

Answer 1

您可以使用ref与MyComponent中的实例建立“连接”：

在您的父组件中，执行以下操作：

class Parent extends React.Component {

  innerComponentInstance = React.createRef()

  // sample place where to "contact" the child component
  componentDidUpdate() {
    this.innerComponentInstance.functionIWantToCall()
  }

  render() {
    <MyComponent ref={ this.innerComponentInstance } />
  }

}

父元素如何调用子元素上定义的函数？

1 个答案: