所以我已经按照Next.js教程here建立了一个网站,现在我已经开始添加一些东西并做一些调整。
突然,我听到控制台里有个烦人的唠叨鬼说:
next-dev.js?3515:20 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
现在,我一辈子都记不起我添加了什么会产生这个警告。我试图注解掉我添加的最新组件。
对了,我尝试添加对react-i18next
得支持,所以我需要帮助得真实的问题是:
如何获得可读性良好的日志?
我最大的文件最多有100行,所以查找3515
行的错误实际上对我没有任何好处。
而且sourceMaps
似乎也没有什么帮助。
我的next.config.js
const path = require('path');
module.exports = {
i18n: {
locales: ['en', 'sv'],
defaultLocale: 'en',
},
sassOptions: {
includePaths: [
path.join(__dirname, 'styles'),
path.join(__dirname, 'components')
],
},
}
我应该从哪里开始查找错误?
编辑:
import React from "react";
import cn from 'classnames';
import styles from './main-nav.module.scss';
import Link from 'next/link';
import Image from 'next/image';
import LangSwitcher from './lang-switcher';
import MenuItems from './menu-items';
export default class MainNav extends React.Component {
constructor(props, children, type, state) {
super(props);
this.state = {
children: children,
type: type,
show: false,
expanded: true,
locale: '',
};
}
toggleMenu = () => {
const currentState = this.state.expanded;
this.setState({ expanded: !currentState });
}
render() {
return (
<div>
<div className={cn(styles["main-nav"])}>
<div className={cn(styles["main-nav-inner"])}>
<div className={cn(styles["capow-logo"])}>
<h2>
<Link href="/">
<Image
src='/images/Jorgeuos-logo.svg'
className={cn(styles["jorgeuos-logo"])}
width={160}
height={69}
alt='Jorgeuos'
/>
</Link>
</h2>
</div>
<MenuItems
expanded={this.state.expanded}
styles={styles}
toggleMenu={this.toggleMenu}
></MenuItems>
{this.children}
</div>
<LangSwitcher></LangSwitcher>
</div>
</div>
);
}
}
我现在慢慢地掌握了这个窍门。我不能在类组件内部使用forwardRef,所以我需要把我的徽标分解成它自己的功能组件。
1条答案
按热度按时间1tuwyuhd1#
所以错误消息给了我一些指针,但是堆栈跟踪仍然有点复杂。当然,我在我的配置中遗漏了一些配置。我现在已经在
package.json
中添加了eslint
,所以我在编译时得到了一个错误。所以我在阅读这些文件的时候突然灵光一闪:
如果
Link
得子组件是功能组件,则除了使用passHref
与legacyBehavior
之外,还必须将该组件 Package 在React.forwardRef
中:我的新
Logo
组件:我仍然有一些其他的错误让我感到困惑,但是在搜索了 Package 在
Link
组件中的每个Image
组件后,我应用了相同的修复,错误现在消失了。