[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 @ 2015-08-18 01:04  Zhentiw  阅读(220)  评论(0)    收藏  举报