React dynamicTableView

最新推荐文章于 2024-08-29 07:51:49 发布

原创最新推荐文章于 2024-08-29 07:51:49 发布 · 310 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#React

React 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用React实现的表格组件示例，展示了如何通过React的基本语法构造动态表格，并结合JavaScript来处理数据展示。该示例包括了加载外部库、定义React组件及渲染表格等过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/react.js" charset="utf-8"></script>
    <script src="js/react-dom.js" charset="utf-8"></script>
    <script src="js/browser.js" charset="utf-8"></script>
    <script src="js/jquery.js" charset="utf-8"></script>
    <script type="text/babel">
        class Tr extends React.Component{
            constructor(...args){
                super(...args);
            }
            render(){
                return <tr>{this.props.param}</tr>;
            }
        }

        class View extends React.Component{
            constructor(...args){
                super(...args);
                this.data = {
                    name:20152011,
                    students:[
                        {'name':'zhangsan','age':20},
                        {'name':'lisi','age':25},
                        {'name':'wangwu',age:30}
                    ]
                };
            }
            render(){
                let arr = this.data.students;
                let _caption = [];
                let _th = [];
                let _tr = [];
                _caption.push(<caption>{this.data.name}</caption>);
//                result.push(<tr>);
                for(var key in arr[0])
                {
                    _th.push(<th>{key}</th>);
                }
                _tr.push(<Tr param={_th}/>);
//                result.push(</tr>);
                for(var i=0;i<arr.length;i++)
                {
                    var arrObj = arr[i];
//                    result.push(<br/>);
                    let _td = [];
                    for(var key in arrObj)
                    {
                        _td.push(<td>{arrObj[key]}</td>);
                    }
                    _tr.push(<Tr param={_td}/>);
//                    result.push(</br>);
                }

                return <table border="3">
                    {_caption}
                    {_tr}
                </table>;
            }
        }

        window.onload=function(){
          let oDiv = document.getElementById('container');
          ReactDOM.render(
              <View/>,
              oDiv
          );
        };

    </script>
</head>
<body>
    <div id="container">

    </div>
</body>
</html>