时间戳

首页 > 解决方案 > 如何将 javascript 代码添加到 reactJS 文件中？

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

问题描述

一般来说，我对 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 文件的标签放入我的 index.html 文件中，并在我的 reactjs 文件中调用该函数。

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

标签： javascriptreactjs

解决方案

在 JSX 中，props 使用这种语法：propName={...}字符串是一个例外，你可以在其中使用propName="...".

所以你应该能够做到onClick={myFunction}

编辑：你可能需要做onClick={myFunction.bind(this)}才能得到你想要的效果。

编辑：固定骆驼案

推荐阅读