Javascript 从父级调用子组件函数时，反应物料UI抽屉不工作

我有一个App.js的示例代码

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Child from './child';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <Child  ref={instance => { this.child = instance; }}/>
          <button onClick={() => { this.child.onAlert(); }}>Click</button>
      </div>
    );
  }
}

export default App;

和子组件类似

import React, { Component } from 'react';

class Child extends Component {
    state = {  }
    onAlert =()=>
        alert("hey");
    render() {
        return (
           <div> IM kid</div> 
        );
    }
}

export default Child;

---

请检查代码，如果需要更改，请告诉我。这里的区别在于，在第一个示例中，您导出了：

export default Child;

export default withStyles(styleSheet)(Child);

在第二个示例中，您导出：

export default Child;

export default withStyles(styleSheet)(Child);

这将返回一个装饰组件，因此ref放在这个装饰组件上，而不是您的子组件上。为了解决这个问题，装饰组件接受一个名为innerRef的属性，这样您就可以将ref传递给您自己的组件。所以要解决这个问题，你需要改变：

<Child  ref={instance => { this.child = instance; }}/>

{this.child=instance；}}/>

到

{this.child=instance；}}/>

<Child  ref={instance => { this.child = instance; }}/>

<Child  innerRef={instance => { this.child = instance; }}/>