反应.js onClick 事件: 类型错误: 无法读取未定义的属性

Question

目前在学习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;

目前，我只想将自定义 onClick 事件添加到具有语言属性的特定<li>元素。它应该呈现如下：

在其他组件的 render() 中工作的 onClick 事件如下所示：onClick={() => changeLanguage('lang_attribute')}所以我应该得到相同的结果，但通过导航渲染

按下渲染按钮，我收到错误消息：Uncaught TypeError: Cannot read property 'changeLanguage' of undefined

需要有关工作示例的一些帮助

更新看来我的问题主要与18next有关。我正在研究 i18n 文档(因为另外我必须对菜单项进行翻译)并进行了一些尝试，但据我了解，问题出在 HOC 和 i18n 函数上。它们超出了范围，因为这里有几个类。 所以我得到两个错误：t 不是函数，i18n 未定义。

import React from 'react';
import ReactDOM from 'react-dom';
import {translate} from 'react-i18next';

class Nav extends React.Component {
render() {
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">Toggle</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() {
const { t, i18n } = this.props;
var links = this.props.links.map(function(link, index){         
return (
<PureNavLink  linkTo={link.linkTo} text={t(link.text)} active={link.active} event={link.event} spanClassName={link.spanClassName} />
/*text={t(link.text)}*/  
);
});
return (
<ul className="nav navbar-nav navbar-right">
{links}
</ul>
);
}
};
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);
module.exports = translate()(Nav);

Answer 1

所以看起来你在Nav的render()方法中定义了你的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 项操作，请务必绑定原始组件的this上下文，否则会出现类似错误。

Answer 2

帕克的答案是正确的

a) 移动更改语言，如上面的代码 - 但也import i18n from '../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);

https://react.i18next.com/components/translate-hoc.html。

或者 d) 使用渲染道具 I18n https://react.i18next.com/components/i18n-render-prop.html

Answer 3

//file.js

import { useTranslation, withTranslation, Trans } from 'react-i18next';
class myClass extends Component{
//...
componentDidMount() {
this.changeLanguage('de'); // en | fr
}
changeLanguage = (lng) => {
const { t , i18n} = this.props;
i18n.changeLanguage(lng);
};
render(){
//...
}
}
export default withTranslation()(myClass) // <-- this should solve the issue