React使用Ref调用函数触发语法错误，请求排查解决

错误提示 #

x Expected ',', got '.'
    ,-[E:\projects\Coding Stuff\MyThing\thingymajig\src\pages\MainMenu.js:13:1]
 13 |
 14 |
 15 |         function BeginTransaction(
 16 |                             inputRef.current.classList.add("is-active")
    :                                     ^
 17 |                       )

核心问题与修正点 #

1. 函数定义语法错误 #

你写的BeginTransaction函数不符合JS语法规范，正确的函数定义需要用花括号包裹函数体，而非直接把执行语句写在括号内。

2. 函数位置错误 #

React组件的return语句只能返回JSX元素，不能在其中定义函数。函数必须定义在组件内部、return语句之前。

3. 事件绑定错误 #

onClick={BeginTransaction()}会在组件渲染时立即执行函数，正确做法是传递函数引用onClick={BeginTransaction}，确保点击时才触发函数。

4. React属性规范问题 #

React中需使用className替代原生的class属性，因为class是JavaScript关键字，直接使用会引发语法冲突。

5. 冗余标签问题 #

React组件无需手动添加<html>和<body>标签，这些标签应放在项目根HTML文件中，组件只需返回页面的局部内容。

修正后的完整代码 #

import 'bulma/css/bulma.css'
import { useRef } from "react"

export default function MainMenu() {
    const inputRef = useRef(null);

    // 正确定义函数，放在return语句之前
    function BeginTransaction() {
        // 添加空值判断，避免ref未挂载时触发报错
        if (inputRef.current) {
            inputRef.current.classList.add("is-active")
        }
    }

    return (
        <div>
            {/* 使用className替代class */}
            <div className="modal" ref={inputRef} id="WalletEntry">
                <div className="modal-background"></div>
                <div className="modal-content">
                    <div className="field">
                        <label className="label">Enter your wallet address</label>
                        <div className="control">
                            <input className="input" type="text" placeholder="Sender Address"/>
                            <button className="button">Enter Address</button>
                        </div>
                        <button className="button">Go back to selection</button>
                    </div>
                </div>
            </div>

            <div className="tile is-ancestor">
                <div className="tile">
                    <div className="tile is-10 is-vertical is-parent">
                        <div className="is_child box is-danger">
                            <h3>Ethereum Mainnet</h3>
                            <figure>
                                {/* 传递函数引用，而非立即执行 */}
                                <input onClick={BeginTransaction} type="image" src="Images/eth.jpg" />
                            </figure>
                            <div>
                                Advanced deposits with uniswap
                            </div>
                        </div>
                    </div>
                </div>

                <div className="tile">
                    <div className="tile is-10 is-vertical is-parent">
                        <div className="is_child box is-danger">
                            hello
                            <img src="https://bulma.io/images/placeholders/128x128.png"/>
                        </div>
                    </div>
                </div>

                <div className="tile">
                    <div className="tile is-10 is-vertical is-parent">
                        <div className="is_child box is-danger">
                            hello
                            <img src="https://bulma.io/images/placeholders/128x128.png"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

额外添加了inputRef.current的空值判断，避免组件未完全挂载时调用classList引发报错，提升代码健壮性。

内容的提问来源于stack exchange，提问作者nicholas dumlao