如何将常规JavaScript合并到ReactJS应用程序中？

我正在用ReactJS构建一个应用程序，并希望在一些事情上也使用常规JavaScript，但是，我很难弄清楚如何合并常规JavaScript

假设我有以下反应组件：

class Example extends React.Component {
    render() {
        return (
            <h1>I want to be hidden onclick</h1>
        );
    }
}

ReactDOM.render(<Example />, document.getElementById("whateverelement");

在这种情况下，如何使用JavaScript隐藏onclick元素？这可能吗

我试着查找，但是，我只能找到很少的结果，不幸的是，没有太大帮助。例如，一个人建议在同一个文件中的单独脚本标记中定义一个全局函数，但我不确定这是否是一个好的做法

结合使用常规JavaScript和ReactJS是否常见？在本例中，我将如何实现它

class Example extends React.Component {
    onClickFunction() {}

    render() {
        return (
            <h1 onclick={onClickFunction}>I want to be hidden onclick</h1>
    );
    }
}

ReactDOM.render(<Example />, document.getElementById("whateverelement");

---

您可以通过打开和关闭花括号在React元素中编写JS，使用just React执行此操作的示例如下：

class Example extends React.Component {
constructor(props) {
  super(props)
  this.state = { visibleTitle: false }
}
onClick = () => {
  this.setState({ visibleTitle: !this.state.visibleTitle })
}
render() {
    const { visibleTitle } = this.state; 
    return (
    <div>
        {visibleTitle && <h1 onClick={this.onClick}>I want to be hidden onclick</h1>}
    </div>
    );
}
}

ReactDOM.render(<Example />, document.getElementById("whateverelement");

---

当然，现代的状态管理库可以取代this.state，你可以使用javascript，但你应该更喜欢一种更具反应性的方式，比如onClick事件，setState存储变量是可见的，然后在className中使用它或者做条件语句rendering@ric虽然这个问题对我很有帮助，不幸的是，它没有进一步解释在哪里定义函数等等。我想。activatemywidget是函数，但它从哪里来，定义在哪里。因此，我必须反对你的说法。对于onclick函数，我可以使用一个常规的老javascript函数？在onclick函数上，你可能应该设置状态，例如collapse，如果collapse为true，则在呈现函数中返回null，但从技术上讲，我可以使用JS？因为在我的实际项目中，我需要执行XMLHttpRequest来从xml文件中获取数据，但我不确定我是否可以只使用JavaScript，或者是否有一种react方法可以做到这一点是的，您可以在那里编写常规JavaScript。它毕竟是一个Javascript类，它只是扩展了React.Component类