如何在外部脚本中调用React组件中的方法

Question

我想调用外部脚本，或者调用方法的React组件

我试过这样做

componentDidMount(){
    window.mwap = this;
}

但没有用

enter image description here

请帮帮我

Answer 1

ReactDOM.render()的返回值实际上是组件的已装载实例：

＆＃13;

＆＃13;

class Counter extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  
  inc() {
    this.setState({count: this.state.count + 1});
  }
  
  render() {
    return (
        <div>
          Count: {this.state.count}
        </div>
    )
  }
}

const instance = ReactDOM.render(
  <Counter />,
  document.getElementById('app')
);

instance.inc();

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

＆＃13;

＆＃13;

＆＃13;

如果您需要访问深层嵌套的组件，那会更困难，但这应该可以让您入门。