react单组件渲染页面

最新推荐文章于 2025-09-10 14:53:18 发布

转载最新推荐文章于 2025-09-10 14:53:18 发布 · 67 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/l8l8/p/9457791.html

文章标签：

#javascript #json #ViewUI

本文介绍了一个使用React及其子组件Item和List实现的数据渲染应用。该应用通过遍历JSON数据并利用Babel转换语法，实现了复杂数据结构的有效展示。具体包括如何处理数组与对象的嵌套遍历，并将数据正确地传递给子组件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.js"></script>
</head>
<body>
    <div id="app"></div>
    <script src="./db.js"></script>
    <script type="text/babel">
    class Item extends React.Component{
        constructor(props){
            super(props);
        };
        render(){
            let {myitem,arr} = this.props;
            console.log( myitem,arr)
            return(
               <div>
                   {
                       arr.map((val,index)=>{ //遍历数组 拿到myitem的key值 然后将 myitem[val]这个数组进行遍历 
                          return <div key={index}>
                                    {myitem[val].map((v)=>{
                                        return <div key={v.id}> //v是json数据 object.keys遍历拿到key值数组进行遍历 将里面的json解开 拿到子数组进行遍历和渲染
                                                  {Object.keys(v).map((it,ind)=>{
                                                      return <div key={ind}>
                                                             {it}:{v[it]}
                                                            </div>
                                                  })}
                                                </div>
                                    })}
                                </div>
                       })
                   }
                </div>
            )
        }
    }
    class List extends React.Component{
        constructor(props){
            super(props);
        };
       render(){
           let {item} = this.props;
           return <div>
                    { Object.keys(item)} //遍历json外层
                    <Item myitem={item} arr={Object.keys(item)}/> //传json和遍历的key的数组给子组件
                  </div>
       }
    }
    class App extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                data
            }
            
        };
        render(){
            return (
                <div>
                <List  item={data}/>  //传数据  
                </div>
            )
        }
    }
        ReactDOM.render(
            <App/>,
            document.getElementById('app')
        )
    </script>
</body>
</html>