Question

我正在使用ReactJS构建一个应用程序，并且还希望使用常规JavaScript来做一些事情，但是，我无法弄清楚如何合并常规JavaScript。

假设我有以下React组件：

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是否常见？我将如何在这个例子中实现它？

Answer 1

如何通过反应来实现这一目的的例子是：

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

Answer 2

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

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

2 个答案: