react.js 多个组件集成示例-阿里云开发者社区

开发者社区> 天飞> 正文

react.js 多个组件集成示例

简介: 这个看得有点懵, 可能要结合其它实例看。 html DOCTYPE html> React JS Example React.
+关注继续查看

这个看得有点懵,

可能要结合其它实例看。

html

<!DOCTYPE html>
<html>
<head>
  <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css"></script>
  <script src="http://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="http://cdn.bootcss.com/react/0.14.8/react-with-addons.js"></script>
  <script src="http://cdn.bootcss.com/react/0.14.8/react-dom.min.js"></script>
  
<meta charset="utf-8">
<title>React JS Example</title>
</head>

<body>
  React.js Example<br/>
<div id="container">
</div>
</body>
</html>

 

js

var data = [{ "when": "2 minutes ago",
    "who": "Jill Dupre",
    "description": "Created new account"
  },
  {
    "when": "1 hour ago",
    "who": "Lose White",
    "description": "Added fist chapter"
}];
var headings = ['When', 'Who', 'Description'];

var Heading = React.createClass({
  render: function() {
    return <th>{this.props.heading}</th>;
  }
});

var Headings = React.createClass({
  render: function() {
    var headings = this.props.headings.map(function(name) {
      return <Heading heading = {name}/>;
    });
    return <thead><tr>{headings}</tr></thead>;
  }
});

var Row = React.createClass({
  render: function() {
    return <tr>
      <td>{this.props.changeSet.when}</td>
      <td>{this.props.changeSet.who}</td>
      <td>{this.props.changeSet.description}</td>
    </tr>;
  }
});

var Rows = React.createClass({
  render: function() {
    var rows = this.props.changeSets.map(function(changeSet) {
    return(<Row changeSet = {changeSet}/>);
    });
    return <tbody>{rows}</tbody>;
  }
});

var App = React.createClass({
  render: function() {
  return <table className = 'table'>
    <Headings headings = {this.props.headings} />
    <Rows changeSets = {this.props.changeSets} />
    </table>;
  }
});

ReactDOM.render(<App headings = {headings}
        changeSets = {data} />,
        document.getElementById('container'));

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
[译] 为多个品牌和应用构建 React 组件
本文讲的是[译] 为多个品牌和应用构建 React 组件,沃尔玛大家庭由多个不同的品牌组成,其中包括 Sam’s Club, Asda,和例如 Walmart Canada 之类的地区分支。电商应用通常会使用大量类似的功能,例如信用卡组件、登录表单、新手引导、轮播图、导航栏等等。
1061 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4617 0
实验:从命令行接收多个数字并求和
实验题目: 编写一个程序,此程序从命令行接收多个数字,求和之后输出结果。 设计思想:   首先我们已经知道String [] args 是main 函数的形式参数,可以用来获取命令行用户输入的参数。
638 0
FrozenJS 针对移动端开发的 js 组件库
什么是FrozenJS FrozenJS 是针对移动端开发的 js 组件库,其依赖 zepto.js 和 FrozenUI。FrozenJS 的所有组件均以 zepto 的插件的形式存在。
2196 0
C#选择多个文件并读取多个文件数据
原文:C#选择多个文件并读取多个文件数据 版权声明:本文为博主原创文章,转载请附上链接地址。 https://blog.csdn.net/ld15102891672/article/details/80586097 ...
897 0
bboss分页组件翻页js前置处理函数和js后置处理函数使用方法
bboss 3.7.7版本及后续版本为分页组件增加翻页js前置处理函数和翻页js后置处理函数,本文介绍使用方法。 1.说明: 为了实现这个功能,对/include下面的pager.js文件做了重构,将所有的分页处理函数封装到bboss.pager对象中。
733 0
.NET 构造DataTable返回多个json值
有时候我们使用Ajax链接一般处理程序需要返回多个值,然而这些数据并非在一个查询表内,此时便想到构造一个虚拟的DataTable,这样就可以返回多个值了(当然有很多办法,这是其中一种 )。
871 0
关于ExtJS3.0组件连接http://extjs.com/s.gif的问题
本文为原创,如需转载,请注明作者和出处,谢谢!     最近在做一个ExtJS的应用,以前使用时都是连网的,也没任何问题。不过最近由于某些原因,开发的机器无法连网。
629 0
+关注
天飞
一个运维老同志
1507
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载