莫克先森

关于MutationObserver 引发的 IntersectionObserver和ResizeObserver的callback类型？

MutationObserver 我们知道，他的callback会被加入到微任务队列中，后面在逛帖子的时候又遇到了 IntersectionObserver和ResizeObserver的callback ，我在想他们俩得callback是什么类型，然后去MDN上面看文档，发现MutationObserver MDN上面也没有明确说明（也可能是我看漏了）。IntersectionObserver和ResizeObserver也没有说明 ，所以才有了这个问题！

我爱了你呢

请问，react中页面渲染完成的是哪个生命周期呢？

请问，react中渲染完成的是哪个生命周期呢？ 我认为是：componentDidMount useEffect(() => { console.log('mounted') // 挂载后 }, []) 可以当我在这个生命周期内，document.querySelector查询id的时候：却报错 useEffect(() => { if(props.scrollToIdx) { const scrollToIdx = props.scrollToIdx console.log("滚动ID：", '#item-' + scrollToIdx!.toString()) const container = document.querySelector("#container") const div: HTMLDivElement | null = document.querySelector('#item-' + scrollToIdx!.toString()) // 这里查询出是null console.log(container, div) if(container) { container.scrollTo({ top: div!.offsetTop, behavior: 'smooth' }); } } }, []) 报错信息: Cannot read properties of null (reading 'offsetTop') TypeError: Cannot read properties of null (reading 'offsetTop') at 也就是说，没有查询出#item-20，原因是还没有渲染到DOM。 请问这个应该如何进行避免呢？ === 完整代码如下： subContainer.tsx import React, { useEffect, useState } from 'react' import { ChangeEvent } from'react'; export type ItemType = { type: "property" | "method", value: string, selected?: boolean } export type SubContainerProps = { height?: number, title: string, data: ItemType[], // 这个是items scrollToIdx?: number // 滚动到具体的index的data数组元素 selected?: boolean // class是否被选中 } export default function SubContainer (props: SubContainerProps){ const [data, setData] = useState([]) // 滚动 useEffect(() => { if(props.scrollToIdx) { const scrollToIdx = props.scrollToIdx console.log("滚动ID：", '#item-' + scrollToIdx!.toString()) scrollTo(scrollToIdx) } }, [props.scrollToIdx]) const scrollTo = (scrollToIdx: number) => { const container = document.querySelector("#container") const div: HTMLDivElement | null = document.querySelector('#item-' + scrollToIdx!.toString()) console.log(container, div) if(container) { container.scrollTo({ top: div!.offsetTop, behavior: 'smooth' }); } } useEffect(() => { setData(props.data) }, [props.data]) const itemClick = (item: ItemType, index: number) => { console.log(item, index) } const searchChange = (e: ChangeEvent) => { //console.log(e.target.value) const searchValue = e.target.value; const filteredData = props.data.filter(item => { // 假设您要匹配 item 的某个属性，比如 value return item.value.toLowerCase().includes(searchValue.toLowerCase()); }); // 在这里根据 filteredData 进行后续的处理，比如更新组件状态或重新渲染相关部分 console.log(filteredData); setData(filteredData) } return ( {props.title} {data.map((item, index) => ( { itemClick(item, index) }} >{item.value} ))} ) } 调用： // 创建的props //滚动位置 const [selIdx, setSelIdx] = useState(0) const props:SubContainerProps = { data: [ { type: 'property', value: 'firstName' }, { type: 'property', value: 'lastName' }, { type: 'property', value: 'firstName' }, { type: 'property', value: 'lastName' }, { type: 'property', value: 'firstName' }, { type: 'property', value: 'lastName' }, { type: 'property', value: 'firstName' }, { type: 'property', value: 'lastName' }, { type: 'property', value: 'firstName' }, { type: 'property', value: 'lastName' }, { type: 'property', value: 'firstName' }, { type: 'property', value: 'lastName' }, { type: 'property', value: 'firstName' }, { type: 'property', value: 'lastName' }, { type: 'property', value: 'firstName' }, { type: 'property', value: 'lastName' }, { type: 'property', value: 'firstName' }, { type: 'property', value: 'lastName' }, { type: 'property', value: 'firstName' }, { type: 'property', value: 'lastName' }, { type: 'method', value: 'getFullname', selected: true }, ], height: 120, title: 'classA', selected: true, scrollToIdx: selIdx }

云卿山手

forwardRef可以获取子组件内DOM节点，但是获取子组件DOM的意义是什么呢？

forwardRef可以获取子组件内DOM节点： import React, { forwardRef, LegacyRef, useRef } from 'react'; import logo from './logo.svg'; import './App.css'; //#region 子组件定义 const ChildComp = forwardRef(( props, ref: LegacyRef ) => { return }) //#endregion function App() { const inpRef = useRef(null) const focusFn = () => { console.log(inpRef.current) } return ( 点击打印当前inpuRef ); } export default App; "dfb2067800c7f67c4eb8b9f74fa966c9.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240918/a22e6cc3771e5b601c06256623a9926c.png) 请问下，获取子组件DOM的意义是什么？