master

分支 (1)

管理

管理

master

myReactdemo
/
excel2.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/table.css"/>
</head>
<body>
<div class="excel2"></div>
</body>
</html>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script>
    var Excel = React.createClass({
        // displayName: 'Excel',
        render: function() {
            return (
                    React.DOM.table(null,
                            React.DOM.thead(null,
                                    React.DOM.tr(null,
                                            this.props.headers.map(function(title, idx) {
                                                return React.DOM.th(null, title);
                                                // return React.DOM.th({key: idx}, title);
                                            })
                                    )
                            )
                    )
            );
        }
    });

    var headers = [
        "Book", "Author", "Language", "Published", "Sales"
    ];

    var data = [
        ["The Lord of the Rings", "J. R. R. Tolkien", "English", "1954–1955", "150 million"],
        ["Le Petit Prince (The Little Prince)", "Antoine de Saint-Exupéry", "French", "1943", "140 million"],
        ["Harry Potter and the Philosopher's Stone", "J. K. Rowling", "English", "1997", "107 million"],
        ["And Then There Were None", "Agatha Christie", "English", "1939", "100 million"],
        ["Dream of the Red Chamber", "Cao Xueqin", "Chinese", "1754–1791", "100 million"],
        ["The Hobbit", "J. R. R. Tolkien", "English", "1937", "100 million"],
        ["She: A History of Adventure", "H. Rider Haggard", "English", "1887", "100 million"]
    ];

    ReactDOM.render(
            React.createElement(Excel, {
                headers: headers,
                initialData: data
            }),
            document.getElementsByClassName("excel2")[0]
    );
</script>