Question

为了研究反应框架，我一直在开发一个简单的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()}>☰</span>

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

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

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

然后在render：

<span className="spanOpen" onClick={openNav}>☰</span>

在REACT中呈现HTML后导入JavaScript

1 个答案: