学习react-简单小案例(3)

<html>
    <head>
        <title></title>
        <meta charset="UTF-8"/>
        <script src="js/react.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/react-dom.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/browser.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .borderstyle{
                border: 1px solid #ccc;
                width: 12%;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
    </body>
    <script type="text/babel">
        var Crud = React.createClass({
            render:function(){
                return (
                    <div className="borderstyle">
                        <div>{this.props.children}</div>
                        <button>编辑</button>
                        <button>删除</button>
                    </div>
                );
            }
        });
        ReactDOM.render(
            <div>
            <Crud>Hello world</Crud>
            </div>,
            document.getElementById(‘container‘)
        );
    </script>
</html>

this.props.children获取值

时间: 2024-11-09 03:05:35

学习react-简单小案例(3)的相关文章

Python学习第四天学习写的小案例(主要是针对 分支/循环的学习)

Python学习第四天学习写的小案例 (2019/07/17) 第一题:使用while循环输出1 2 3 4 5 6 8 9 10 程序代码: s = 0 while s<10: if s==6: s += 1 # 当数字为7的时候输出一个空格出来 print(end=' ') continue s += 1 print(s,end=' ') 运行结果: 1 2 3 4 5 6 8 9 10 第二题: 求1-100的所有数的和 程序代码: count = 0 for i in range(101

学习react-简单小案例(4)--点击事件

<html> <head> <title></title> <meta charset="UTF-8"/> <script src="js/react.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/react-dom.min.js

学习react-简单小案例(2)

<html> <head> <title></title> <meta charset="UTF-8"/> <script src="js/react.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/react-dom.min.js

搜索栏简单小案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.4.js"></script> <script> $(function () { //1.获取焦点的事件 $("#

js学习总结----经典小案例之选项卡

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body,div,ul,li{ margin:0; padding: 0; font-family: Arial; font-size:12px; } ul li{ list-style:none

js学习总结----经典小案例之表格排序

具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0;padding:0;font-family:"微软雅黑";font-size:14px

爬虫入门学习 贴吧小案例

1 import urllib.request 2 import urllib.parse 3 import random 4 5 #目标地址 6 url="http://tieba.baidu.com/f" 7 8 #伪造客户端 http请求头 9 ua_list = [ 10 "User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0.1) Gecko/20100101 Firefox/4.0.1&qu

angular前端框架简单小案例

一.angular表达式 <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script> <!-- 如果要使用angular 1.必须先引入相关的框架 2.必须在页面body上写一个属性ng-app表示使用angular js应用 3.表达式页面如果需要展示数据,需要写

反射小案例(菜单的可配置化)

刚开始学反射时,只是知道反射可以获取一个类里的各种信息(字段,属性,方法.....)!前面也只是列举了一些反射的基本语法,下面就通过一个简单小案例体会反射的用法: 注:该案例通过控制台程序完成 反射的基本用法:http://www.cnblogs.com/fengxuehuanlin/p/5274607.html 用的的类库:   调用的主方法: 注:由于是在主方法中调用类库,所以要引用类库这个程序集 控制台程序部分: class Program { static void Main(strin