小编Wes*_*ley的帖子
类型错误：无法读取 null 的属性“getBoundingClientRect”
我正在尝试创建具有粘性效果的标题，但是在滚动页面时遇到此错误，有时有效，有时会发生错误。谁能帮我解决这个问题吗？
const EventPage: React.FC = () => {
const [isSticky, setSticky] = useState(false);
const ref = useRef(null);
const handleScroll = () => {
if (ref.current.getBoundingClientRect().y <= -580 || null) {
console.log(ref.current.getBoundingClientRect().y);
setSticky(true);
} else {
setSticky(false);
}
};
useEffect(() => {
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", () => handleScroll);
};
}, []);
return (
<div>
<Head>
<title>Event Page</title>
</Head>
<Header />
<div className={`sticky-wrapper${isSticky ? " sticky" : ""}`} ref={ref}>
{isSticky && <Sticky />}
</div>
4
推荐指数
推荐指数
1
解决办法
解决办法
4万
查看次数
查看次数
使用 nextJS 渲染图像时出错。图像未出现
我正在尝试使用 nextJS 渲染图像，但它不起作用。我可以通过浏览器 URL 访问该图像，但 img 组件不会渲染它。
<img src="/public/images/logo.svg" />
3
推荐指数
推荐指数
1
解决办法
解决办法
7959
查看次数
查看次数
自定义箭头 Swiper 滑块 + Next.js + Sass
我在 Next.JS 开发的项目中使用滑块滑动器，并使用 Sass 进行样式设置。但是，当我要按照文档的要求使用 swiper 类来设置箭头样式时，它不起作用。
我需要箭头位于组件外部，而不是重叠。
CSS
.swiper-button-next,
.swiper-button-prev {
background: red;
position: absolute;
top: 50%;
width: calc(var(--swiper-navigation-size) / 44 * 27);
height: var(--swiper-navigation-size);
margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
.swiper-button-next:after,
.swiper-button-prev:after {
background: red;
font-family: swiper-icons;
font-size: var(--swiper-navigation-size);
text-transform: none !important;
letter-spacing: 0;
text-transform: none;
font-variant: initial;
line-height: 1;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next …3
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
警告：不推荐使用 componentWillMount。但我没有使用这种方法
我正在开发一个使用导航（Stack 和 TabNavigator）的应用程序，但是，在将 react 导航升级到版本 4 后，会出现一条已弃用的“componentWillMount”错误消息。但我没有在我的应用程序中的任何地方使用这种方法。它可以是什么？
import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer} from 'react-navigation';
import Screen1 from './Screen1';
const telas = createStackNavigator({
Tela1:{
screen:Screen1
}
})
export default createAppContainer(telas);
//------------------------------------------
import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import Tab1 from './Tab1';
import Tab2 from './Tab2';
const telas = createBottomTabNavigator({
Tela1:{
screen:Tab1
},
Tela2:{
screen:Tab2
}
})
export default telas;
//----------------------- Tabs
import React from 'react';
import {View, Text} from 'react-native';
export default class Tab1 extends React.Component{
render(){
return( …2
推荐指数
推荐指数
1
解决办法
解决办法
256
查看次数
查看次数
我们如何在 Nextjs 动态导入中输入forwardRef？
这是我的代码。我需要输入forwardRef，但我没有得到它，事实上我不知道到底在哪里输入它。有人能帮我吗？我收到错误
类型“{}”上不存在属性“forwardedRef”。
类型 '{forwardedRef: MutableRefObject; }' 不可分配给类型“IntrinsicAttributes”。类型“IntrinsicAttributes”上不存在属性“forwardedRef”。
import type { NextPage } from "next";
import dynamic from "next/dynamic";
import { useRef } from "react";
import "react-quill/dist/quill.snow.css";
const ReactQuill = dynamic(
async () => {
const { default: RQ } = await import("react-quill");
return ({ forwardedRef, ...props }) => <RQ ref={forwardedRef} {...props} />;
},
{
ssr: false,
}
);
const Home: NextPage = () => {
const quillRef = useRef(null);
return <ReactQuill forwardedRef={quillRef} />;
};
export default Home;
2
推荐指数
推荐指数
1
解决办法
解决办法
1266
查看次数
查看次数