react.js 多个组件集成示例

这个看得有点懵，

可能要结合其它实例看。

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>

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.js 多个组件集成示例相关推荐

React.js加载组件以及JSX脚本处理代码
React.js是一个组件化的JS界面开发库,可以结合XML格式的脚本语法JSX. 如果你的页面中包含了这样的代码,需要将JSX代码预编译为Raw JavaScript,不然会提示有语法错误" ...
React.js 小书 Lesson18 - 挂载阶段的组件生命周期（一）
React.js 小书 Lesson18 - 挂载阶段的组件生命周期(一) 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson18 转载请注 ...
移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
【译】一份通俗易懂的React.js基础指南-2018
原文链接:tylermcginnis.com/reactjs-tut- by Tyler McGinnis 这篇文章最初发表于2015年1月,但最近被更新为React 16.3以及它所包含的所有优点. ...
编写react组件_如何编写第一个React.js组件
编写react组件 React的函数和类组件,道具,状态和事件处理程序 (React's function and class components, props, state, and event ...
Java 接受reactjs数据_[Java教程]react.js 父子组件数据绑定实时通讯
[Java教程]react.js 父子组件数据绑定实时通讯 0 2017-09-23 17:00:14 import React,{Component} from 'react'import Reac ...
vue 滚动条_轻量级 React.js 虚拟美化滚动条组件RScroll
前几天有给大家分享一个Vue自定义滚动条组件VScroll.今天再分享一个最新开发的React PC端模拟滚动条组件RScroll. vue+pc桌面端模拟滚动条组件VScroll rscroll 一 ...
如何在React JS组件和React JS App中添加CSS样式？
In this tutorial, we will only work with CSS styles. Please ensure you have basic knowledge of HTML, ...
React.js 小书 Lesson24 - PropTypes 和组件参数验证
作者:胡子大哈原文链接: http://huziketang.com/books/react/lesson24 转载请注明出处,保留原文链接和作者信息. 我们来了到了一个非常尴尬的章节,很多初学的朋 ...

react.js 多个组件集成示例

react.js 多个组件集成示例相关推荐

最新文章

热门文章