[React] React Fundamentals: Dynamically Generated Components

React components can be dynamically generated based on a dataset. This lesson will show you how to do just that.

 

复制代码
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Lesson 15: dynamically create componenets</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
    <style>
        body {
            margin: 25px;
        }
    </style>
</head>
<body>
<div id="panel"></div>
<script type="text/jsx">
    /** @jsx React.DOM */

    var App = React.createClass({
        getInitialState:function(){
            return {
                data: [
                    {id: 1,  fname: "Simon",  lname: "Bailey"},
                    {id: 2,  fname: "Thomas", lname: "Burleson"},
                    {id: 3,  fname: "Will",   lname: "Button"},
                    {id: 4,  fname: "Ben",    lname: "Clinkinbeard"},
                    {id: 5,  fname: "Kent",   lname: "Dodds"},
                    {id: 6,  fname: "Trevor", lname: "Ewen"},
                    {id: 7,  fname: "Aaron",  lname: "Frost"},
                    {id: 8,  fname: "Joel",   lname: "Hooks"},
                    {id: 9,  fname: "Jafar",  lname: "Husain"},
                    {id: 10, fname: "Tim",    lname: "Kindberg"},
                    {id: 11, fname: "John",   lname: "Lindquist"},
                    {id: 12, fname: "Joe",    lname: "Maddalone"},
                    {id: 13, fname: "Tyler",  lname: "McGinnis"},
                    {id: 14, fname: "Scott",  lname: "Moss"},
                    {id: 15, fname: "Robert", lname: "Penner"},
                    {id: 16, fname: "Keith",  lname: "Peters"},
                    {id: 17, fname: "Lukas",  lname: "Ruebbelke"},
                    {id: 18, fname: "Brett",  lname: "Shollenberger"}
                ]
            }
        },

        render:function(){
            var rows = this.state.data.map(function(person, index) {
                return <PersonRow data={person} key={index}/>
            });
            return (
                    <table>{ rows }</table>
            );
        }

    });

    var PersonRow = React.createClass({
       render: function() {
           return (
                 <tr>
                     <td>{this.props.data.fname}</td>
                     <td>{this.props.data.lname}</td>
                 </tr>
           );
       }
    });

    React.render(<App />, document.getElementById('panel'));
</script>
</body>
</html>
复制代码

 

posted @   Zhentiw  阅读(210)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae