首页 > 解决方案 > TypeError:无法读取反应js中未定义的属性“替换”

问题描述

这是我在反应组件中的 html 代码:

<a className="nav-link" href="#" onClick={this.handleExit}>
     <img
         src={require("../data/btn-ex.png")}
         style={{ width: "70px" }}
         alt="btn"
     />
</a>

这是我使用注销的功能:

handleExit = e => {
    e.preventDefault();
    if (window.confirm("برای خروج اطمینان دارید؟")) {
      this.props.history.replace("/logout");
    }
};

但这不起作用

const require = () => 'https://api.adorable.io/avatars/285/abott@adorable.png'

class App extends React.Component {
  handleExit = e => {
    e.preventDefault();
    if (window.confirm("برای خروج اطمینان دارید؟")) {
      this.props.history.replace("/logout");
    }
  };

  render () {
    return (
      <a className="nav-link" href="#" onClick={this.handleExit}>
        <img src={require("../data/btn-ex.png")} style={{
            width: "70px"
          }} alt="btn"/>
      </a>
    )  
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

标签: reactjs

解决方案


这是很好的工作

    import React, { Component } from "react";
    import { Link } from "react-router-dom";

    class Navbar extends Component {
      render() {
        return (
    ....
   <Link className="nav-link" to="/dashboard/logout">
         <img
               src={require("../data/btn-ex.png")}
               style={{ width: "70px" }}
               alt="btn"
         />
   </Link>

    ...
        );
      }
    }
    export default Navbar;

推荐阅读