javascript - 如何将 javascript 代码添加到reactJS 文件中？

Question

这个问题已经有答案了:

Changing style of a button on click (6 个回答)

已关闭 4 年前。

我对reactjs和javascript非常陌生，我正在尝试弄清楚如何让这个简单的js代码在我的reactjs文件中工作。我希望文本在单击时变为红色。

我尝试过:创建外部js文件并使用 Helmet 导入它插入标签

import React, { Component } from 'react';
import './about.css';
import logo from './S54 Logo 2.svg';
import { Helmet } from "react-helmet";
import aboutJS from './about';

export default class About extends Component {
    render() {
        return (
            <div id="about-page">
                <Helmet>
                    <script>
                        {'aboutJS'};
                    </script>
                </Helmet>
                <img id="about-page-logo-img" src={logo} />
                <h2 id="mission-statement" onclick="myFunction()">
                    Catalog the World's Underrepresented Art so everyone can share in the enjoyable experience
                </h2>
            </div>
        )
    }
}

这是js文件

export function myFunction() {
    document.getElementById("mission-statement").style.color = "red";
}

我还尝试将 js 代码直接添加到脚本标记中，而不是导入文件，但这不起作用。

我尝试将我创建的外部 js 文件的标签放入 my index.html file 中，并调用我的reactjs文件中的函数。

没有任何效果。我应该在哪里以及如何添加此代码？

Answer 1

在 JSX 中，props 使用以下语法:propName={...}，但字符串是一个异常(exception)，您可以在其中执行 propName="..."。

所以你应该能够执行onClick={myFunction}

编辑:您可能需要执行 onClick={myFunction.bind(this)} 才能获得所需的效果。

编辑:修复驼峰式大小写