react中操作dom元素自动填充

最新推荐文章于 2026-08-15 16:03:12 发布

原创最新推荐文章于 2026-08-15 16:03:12 发布 · 1.7k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

React

当前文章被收录于：

React

14 篇文章 1 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一种在React应用中请求后台数据并更新状态的方法。通过获取数据后更新组件的状态，实现DOM元素的动态填充。具体实现了遍历数据并将其插入到列表项中。

请求后台数据后，在该方法中将数据push进dom元素：

constructor(props){
    super(props);
    this.state = {
        liDom:null;
    }
}

GetDom=()=>{
    if（Info.data && Info.data.status === 200){
        let Data = Info.data.data;
        let dom = [];
        for(let i=0;i<Data.length;i++){
            dom.push{
                <li value={i} key={i}>
                    {Data[i].color}
                </li>
            }
        }
        this.setState({
            liDom:dom;
        })
    }
}

render(){
    return(
        <div>
            <ul>
                {this.state.liDom}
            </ul>
        </div>
    )
}