Change document.getElementsByClassName( "parent" )[0].children in React

Question

我有一个香草JS(javascript(代码。我搜索了很多教程文档和视频，以将此代码更改为React。

以下是简单javascript 中的代码

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

有人能帮我这是怎么反应的吗？

Answer 1

通常，您只需要不在React中使用类似getElementsByClassName的DOM方法。

从设计上讲，React；知道"；关于DOM元素，它只知道它的状态，然后根据状态渲染DOM元素，然后"；忘记"；关于DOM元素。

您可能会这样想：
您不再开发香草JS和HTML，而是您开发React。

不管怎样，如果你真的因为某种原因需要它，你需要找到一种方法"手动"；告知react DOM节点已准备好访问。没有办法"；自动地"；让React了解DOM元素的当前状态。

请注意，不能使用类似window.onload的方法，因为这也是DOM世界中的一种方法

例如：

export const SomeList = (props)=>{
const list = [1,2,3,4,5,6];
return (<div className="someParent">
{ list.map((item)=> <p className="someChildren">number { item }</p>) }
</div>);
};
export const AccessDom = (props)=>{
const accessDomNodes = function(){
const Children = document.getElementsByClassName("someParent")[0].children;
console.log('Children:', Children);
};
return (<div>
<SomeList />
<button type="button" onClick={ accessDomNodes }>
I'm sure the DOM node exists now
</button>
</div>);
};

如果你想在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>);
};