Reactjs React.js onClick事件：TypeError:无法读取未定义的属性

目前在学习React和JavaScript方面遇到了困难

我有两个组件，导航：

import React from 'react';
import ReactDOM from 'react-dom';
import Nav from './houses/Nav.js';

// set data
var navbar = {};
navbar.brand = {linkTo: "#hero", text: "text"};
navbar.links = [
      {linkTo: "#", event:"es", spanClassName: "flag-icon flag-icon-es"},
      {linkTo: "#", event:"en", spanClassName: "flag-icon flag-icon-gb"},
      {linkTo: "#about", text: "about", spanClassName: "btnicon icon-user"},
      {linkTo: "#contacts", text: "contacts", spanClassName: "btnicon icon-envelope-open"}
  ];

class Navigation extends React.Component {

  render() {
    return (
    <header>         
      <Nav {...navbar} />        
    </header>
    )
  }
}

module.exports = Navigation;

import React from 'react';
import ReactDOM from 'react-dom';

class Nav extends React.Component {    

  render() {

    const changeLanguage = (lng) => {
      i18n.changeLanguage(lng);
    } 

      return(
        <nav className="navbar navbar-inverse navbar-fixed-top" role="navigation">
          <div className="container">
            <div className="navbar-header">
              <button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
                <span className="sr-only" lang="lt">Toggle nav</span> 
                <span className="icon-bar"></span>
                <span className="icon-bar"></span>
                <span className="icon-bar"></span>
              </button>
              <NavBrand linkTo={this.props.brand.linkTo} text={this.props.brand.text} />
            </div>
            <div className="collapse navbar-collapse">
              <NavMenu links={this.props.links} />
            </div>
          </div>
        </nav>
      );
    }
  };

  class NavBrand extends React.Component{
    render() {
      return (
        <a className="navbar-brand" alt="back to home" href={this.props.linkTo}>{this.props.text}
            <span className="brandicon"></span> 
            <span className="brandname"></span>   
        </a>
      ); 
    }
  };

  class NavMenu extends React.Component{
    render() {
      var links = this.props.links.map(function(link){       
          return (
            <NavLink linkTo={link.linkTo} text={link.text} active={link.active} event={link.event} spanClassName={link.spanClassName} />
          );

      });
      return (
        <ul className="nav navbar-nav navbar-right">
          {links}
        </ul>
      );
    }
  };

  class NavLink extends React.Component{
   render() {        

    if (this.props.event){
      return(
        <li><button onClick={() => changeLanguage(this.props.event)}>{this.props.event}<span className={(this.props.spanClassName)}></span></button></li>
      )
    }
    return(        
      <li className={(this.props.active ? "active" : "")}><a href={this.props.linkTo}>{this.props.text} <span className={(this.props.spanClassName)}></span></a></li>
    );
  }
};


  module.exports = Nav;

---

因此，您似乎在

render（）

方法中为

Nav

定义了

changeLanguage

函数。因此，

changeLanguage

绑定到

Nav

的范围和上下文，因此您的

NavLink

组件对此一无所知。首先尝试将

changeLanguage

移出任何组件，并查看它是否被调用，即

// define the function outside of component scope
const changeLanguage = (lng) => {
  i18n.changeLanguage(lng);
};

// function is now available for use in any component in
// this module - just export it to use it in other modules
class Nav extends React.Component {

  render() {
    // your code and other components
  }
}

---

React组件中定义的方法和函数绑定到该组件的实例。在别处调用该函数或方法的唯一方法是1）在任何组件之外定义该函数，或2）将对该函数或方法的引用作为

prop

传递给子组件。如果执行第2项操作，请确保绑定原始组件的

此
上下文，否则您将获得所看到的错误。
因此，您似乎在
render（）
方法中为
Nav
定义了
changeLanguage
函数。因此，
changeLanguage
绑定到
Nav
的范围和上下文，因此您的
NavLink
组件对此一无所知。首先尝试将
changeLanguage
移出任何组件，并查看它是否被调用，即

// define the function outside of component scope
const changeLanguage = (lng) => {
  i18n.changeLanguage(lng);
};

// function is now available for use in any component in
// this module - just export it to use it in other modules
class Nav extends React.Component {

  render() {
    // your code and other components
  }
}

React组件中定义的方法和函数绑定到该组件的实例。在别处调用该函数或方法的唯一方法是1）在任何组件之外定义该函数，或2）将对该函数或方法的引用作为
prop
传递给子组件。如果执行第2项操作，请确保绑定原始组件的
此
上下文，否则您将看到错误。
Parker的答案是正确的

a） 移动changeLanguage，就像上面的代码一样-但也从“../i18n”导入i18n或定义i18n实例的位置

import i18n from 'i18n';

// define the function outside of component scope
const changeLanguage = (lng) => {
  i18n.changeLanguage(lng);
};

// function is now available for use in any component in
// this module - just export it to use it in other modules
class Nav extends React.Component {

  render() {
    // your code and other components
  }
}

或者b）通过道具传递语言

// ...
<NavMenu links={this.props.links} changeLanguage={changeLanguage} />

// ...
<NavLink changeLanguage={changeLanguage} linkTo={link.linkTo} text={link.text} active={link.active} event={link.event} spanClassName={link.spanClassName} />

/。。。
// ...

或者c）用翻译工具装饰导航链接

class PureNavLink extends React.Component{

    render() {        
      const { t, i18n } = this.props;
      const toggle = lng => i18n.changeLanguage(lng); 

      if (this.props.event){        

        return(  
          <div>               

          <button onClick={() => toggle(this.props.event)}>{t(this.props.event)}</button>
          </div>        
        )
      }

      return(        
        <li className={(this.props.active ? "active" : "")}><a href={this.props.linkTo}>{this.props.text} <span className={(this.props.spanClassName)}></span></a></li>        
      );
    }
  };

const NavLink = translate()(PureNavLink);

类PureNavLink扩展了React.Component{
render（）{
const{t，i18n}=this.props；
const toggle=lng=>i18n.changeLanguage（lng）；
如果（this.props.event）{
报税表（
切换（this.props.event）}>{t（this.props.event）}
)
}
报税表（

);
}
};
const NavLink=translate（）（PureNavLink）；


或d）使用渲染属性I18n
帕克的答案是正确的

a） 移动changeLanguage，就像上面的代码一样-但也从“../i18n”导入i18n或定义i18n实例的位置

import i18n from 'i18n';

// define the function outside of component scope
const changeLanguage = (lng) => {
  i18n.changeLanguage(lng);
};

// function is now available for use in any component in
// this module - just export it to use it in other modules
class Nav extends React.Component {

  render() {
    // your code and other components
  }
}

或者b）通过道具传递语言

// ...
<NavMenu links={this.props.links} changeLanguage={changeLanguage} />

// ...
<NavLink changeLanguage={changeLanguage} linkTo={link.linkTo} text={link.text} active={link.active} event={link.event} spanClassName={link.spanClassName} />

/。。。
// ...

或者c）用翻译工具装饰导航链接

class PureNavLink extends React.Component{

    render() {        
      const { t, i18n } = this.props;
      const toggle = lng => i18n.changeLanguage(lng); 

      if (this.props.event){        

        return(  
          <div>               

          <button onClick={() => toggle(this.props.event)}>{t(this.props.event)}</button>
          </div>        
        )
      }

      return(        
        <li className={(this.props.active ? "active" : "")}><a href={this.props.linkTo}>{this.props.text} <span className={(this.props.spanClassName)}></span></a></li>        
      );
    }
  };

const NavLink = translate()(PureNavLink);

类PureNavLink扩展了React.Component{
render（）{
const{t，i18n}=this.props；
const toggle=lng=>i18n.changeLanguage（lng）；
如果（this.props.event）{
报税表（
切换（this.props.event）}>{t（this.props.event）}
)
}
报税表（

);
}
};
const NavLink=translate（）（PureNavLink）；

---

或者d）使用渲染属性I18n

您可以将代码放在JSFIDLE/codepen中吗？我们将更容易帮助您解决问题这里不是我的代码笔，使用一种稍微不同的方法-React.createClass:但逻辑是same@Kuzma-不能在子组件中直接调用父方法。您可以使用道具将函数从父组件传递到子组件。将changeLanguage方法置于render（）之上并删除常量。您可以将代码放入JSFIDLE/codepen中吗？我们将更容易帮助您解决问题这里不是我的代码笔，使用一种稍微不同的方法-React.createClass:但逻辑是same@Kuzma-不能在子组件中直接调用父方法。您可以使用道具将函数从父组件传递到子组件。将changeLanguage方法置于render（）上方并删除常量。谢谢您的回答。实际上，将

changeLanguage

移出呈现和类会抛出TypeError:undefined没有属性错误。请看一下它是如何工作的：很抱歉，我没有意识到，

i18n

来自第三方库-我以为这是你自己管理的道具。它是从这里来的吗？如果是这样，看起来您需要用

translate

包装使用

i18n

道具的每个组件，以便将其传递进来。或者你可以把它从父母传给孩子。稍后我会为你做一把小提琴，我要回到我的日常工作：（是的，这是react i18next lang switch。似乎我必须更早地描述它。谢谢！将等待小提琴：）所以这里是：在这个例子中，我们将changeLanguage方法传递给我们的孩子

NavButton

组件。当我们这样做时，我们绑定父组件的

this

引用（毕竟它是

changeLanguage

方法的所有者）以及我们想要传递到方法（我们的

lng

）变量中的参数。使用此策略，可以为使用数组的语言呈现所需的任意多个按钮。希望这对你有帮助！非常感谢你，帕克！我今天会测试一下谢谢你的回答。实际上，将

changeLanguage

移出呈现和类会抛出TypeError:undefined没有属性错误。请看一下这里的工作情况：对不起，我没有意识到