Javascript 更改文档.GetElementsByCassName（“父项”）[0]。中的子项

我有一个香草JS（javascript）代码。我搜索了大量教程文档和视频，以更改此代码以做出反应

以下是简单javascript中的代码

const Children = document.getElementsByClassName("parent")[0].children;
Array.from(sliderChildren).forEach((child) => {    
  });

有人能帮我在react中如何做到这一点吗？

一般来说，您不会在react中使用像

getElementsByClassName

这样的DOM方法

根据设计，React根本不“知道”DOM元素，它只知道它的状态，然后从状态中呈现DOM元素，然后再次“忘记”DOM元素

您可能会这样想：
您不再开发普通的JS和HTML，而是开发React

无论如何，如果出于某种原因确实需要它，那么需要找到一种方法“手动”告诉react DOM节点已准备好被访问。没有办法“自动”让React知道DOM元素的当前状态

请注意，您不能使用类似于

window.onload

的方法，因为这也是来自DOM世界的一种方法

e、 g:

export const SomeList=（道具）=>{
常数列表=[1,2,3,4,5,6]；
返回(
{list.map（（item）=>
编号{item}
）}
);
};
export const AccessDom=（道具）=>{
const accessDomNodes=函数（）{
const Children=document.getElementsByClassName（“someParent”）[0]。Children；
log（'Children:'，Children）；
};
返回(
我确信DOM节点现在存在
);
};

如果要在React中处理DOM元素，需要通过设置一些React状态将其传递到React世界：

export const AccessDom = (props)=>{
    const [ childsList, setChildsList ] = useState([]); // <-- a React state

    const accessDomNodes = function(){
        const Children = document.getElementsByClassName("someParent")[0].children;
        setChildsList( Array.from( Children ) );  // <-- set a React state
        console.log('Children:', Children);
    };

    return (<div>
        <SomeList />
        <button type="button" onClick={ accessDomNodes }>
            I'm sure the DOM node exists now
        </button>
        <div>found children: { childsList.length }</div>
    </div>);
};

export const AccessDom=（道具）=>{
const[childsList，setChildsList]=useState（[]）；//实际上，React允许您在不必使用document对象的情况下操作DOM。如果您指出您想要完成的具体操作，那么我们可以向您展示React是如何完成的，这会有所帮助。请添加一个最小的工作代码示例（基本HTML-JS代码段）.Read more:React需要一个全新的文件系统来支持典型的vanilla JS。因此，我会推荐并查看
export const AccessDom = (props)=>{
    const [ childsList, setChildsList ] = useState([]); // <-- a React state

    const accessDomNodes = function(){
        const Children = document.getElementsByClassName("someParent")[0].children;
        setChildsList( Array.from( Children ) );  // <-- set a React state
        console.log('Children:', Children);
    };

    return (<div>
        <SomeList />
        <button type="button" onClick={ accessDomNodes }>
            I'm sure the DOM node exists now
        </button>
        <div>found children: { childsList.length }</div>
    </div>);
};