当setInterval在componentDidMount中运行时如何clearInterval onClick？

在React中，当使用setInterval在componentDidMount生命周期方法中运行时，我们需要在组件卸载时清除定时器，以避免内存泄漏和不必要的计算。

为了在onClick事件中清除setInterval，我们可以使用以下步骤：

在组件的构造函数中初始化一个定时器变量，例如timerId。
在componentDidMount生命周期方法中使用setInterval函数来启动定时器，并将返回的定时器ID存储在timerId变量中。
在onClick事件处理函数中调用clearInterval函数，并传入timerId变量作为参数，以清除定时器。

下面是一个示例代码：

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.timerId = null; // 初始化定时器变量
  }

  componentDidMount() {
    this.timerId = setInterval(() => {
      // 定时器逻辑
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerId); // 在组件卸载时清除定时器
  }

  handleClick() {
    clearInterval(this.timerId); // 在点击事件中清除定时器
  }

  render() {
    return (
      <button onClick={this.handleClick.bind(this)}>Clear Interval</button>
    );
  }
}

export default MyComponent;

在上面的示例中，我们在componentWillUnmount生命周期方法中清除定时器，以确保在组件卸载时清除定时器。同时，在handleClick方法中也调用clearInterval来清除定时器，以响应点击事件。

请注意，这只是一个示例，实际情况中，你可能需要根据具体的业务需求和组件结构来调整代码。