javascript - 在 REACT 中呈现 HTML 后导入 JavaScript

Question

为了研究 React 框架，我一直在开发一个简单的 Web 应用程序来对书籍进行评分。它目前看起来像这样:

侧边栏的想法很简单:隐藏时它的宽度将为 0，当我单击打开的菜单按钮时它会被设置为另一个宽度。

它背后的代码是这样的:

import React from 'react';
import { Link } from 'react-router-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import home from '../../image/side-nav/home.png';
import list from '../../image/side-nav/list.png';
import '../../css/SideNavBar.css'
import * as utils from '../../scripts/utils.js'; 

const SideNavBar = () =>{
    return(
        <Router>
            <div>
                <span className="spanOpen" onClick={utils.openNav()}>&#9776;</span>
                <div className="sidenav">
                    <a className='closebtn' onClick={utils.closeNav()}>&times;</a>
                    <ul>
                        <li>
                            <Link to='/'><img src={home} alt='Home' /><span className='h-item'>Home</span></Link>
                        </li>
                        <li>
                            <Link to='/books'><img src={list} alt='Books' /><span className='b-item'>Books</span></Link>
                        </li>
                    </ul>
                    <div className='sidenav-footer'>
                        <hr />
                        <small>Pelicer &copy; 2018</small>
                    </div>
                </div>
            </div>
        </Router>
    );
}
export default SideNavBar;

这里是 util.js 文件的代码，其中包含要更改的功能:

export function openNav() {
    // document.getElementsByClassName("sidenav")[0].style.width = "315px";
}

export function closeNav() {
    // document.getElementsByClassName("sidenav")[0].style.width = "0";
}

但是当我运行它时，出现错误:TypeError: Cannot read property 'style' of undefined。它发生是因为它试图改变尚未创建的东西的宽度。我想做的，并尝试使用 componentDidMount，是在呈现 HTML 之后导入 JavaScript，以一种在设置宽度时组件已经存在的方式。有人可以帮忙解决吗？

Answer 1

您太早调用了 utils.xyz 函数。这:

<span className="spanOpen" onClick={utils.openNav()}>&#9776;</span>

调用 utils.openNav 并将其返回值用作onClick 的值。你的意思可能是:

<span className="spanOpen" onClick={utils.openNav}>&#9776;</span>

(没有 ())仅引用函数。 如果 utils.openNav 在调用期间不需要this 来引用utils，这将起作用。如果在调用期间确实需要this为utils:

<span className="spanOpen" onClick={() => utils.openNav()}>&#9776;</span>

...它定义了一个函数并将该函数用作 onClick 的值。

在 this 很重要的情况下，最好将该功能组件更改为类组件，创建该函数一次，然后重用它:

class SideNavBar extends React.Component {
    constructor() {
        this.openNav = () => utils.openNav();
        // ...
    }
    // ...
}

然后在render中:

<span className="spanOpen" onClick={openNav}>&#9776;</span>