React 组件
来源:互联网 发布:淘宝首页有什么服务 编辑:程序博客网 时间:2024/04/30 00:41
如何使用组件使得我们的应用更容易来管理。
React 实例
let HelloMessage = React.createClass({ render: function () { return <div><h1>Hello World</h1></div>; }});ReactDOM.render( <HelloMessage />, document.getElementById("example2"));
React.createClass 方法用于生成一个组件类 HelloMessage。 <HelloMessage />
实例组件类并输出信息。
注意
原生 HTML 元素名以小写字母开头,而自定义的 React 类名以大写字母开头,比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签,否则也会报错。
如果我们需要向组件传递参数,可以使用 this.props 对象
let HelloName = React.createClass({ render:function () { return <div><h1>{this.props.name}</h1></div>; } });ReactDOM.render( <HelloName name = "诸葛亮"/>, document.getElementById("example4"));
以上实例中 name 属性通过 this.props.name 来获取。
注意,在添加属性时, class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。
复合组件
我们可以通过创建多个组件来合成一个组件,即把组件的不同功能点进行分离。
let Website = React.createClass({ render: function () { return <div> <Name name={this.props.name}/> <Link site={this.props.site}/> </div> }});let Name = React.createClass({ render: function () { return <h1>{this.props.name}</h1> }});let Link = React.createClass({ render: function () { return(<a href="www.baidu.com" style={mystyle}><h2>{this.props.site}</h2></a>); }});ReactDOM.render( <Website name="百度一下" site="www.baidu.com" /> , document.getElementById("example4"));
0 0
- React 组件
- React组件
- react 组件
- React组件
- React 组件
- react 组件
- react组件
- react 组件
- React组件
- react---组件
- react demo3 (自定义react组件)
- React 7 React高级组件
- react组件生命周期过程
- React:组件的生命周期
- React复合组件
- React Native 组件生命周期
- React-组件的复合
- react-native 自定义组件
- 进程与线程的一个简单解释
- java中equal()与==的区别简记
- Java读写文件的两种方法
- HbaseShell命令
- 程序设计实践记录4
- React 组件
- Keras上实现AutoEncoder自编码器
- [Unity3D课堂作业] 打靶游戏 ShootingArrow
- kettle 数据库连接找不到jdbc Driver问题解决方法
- win10和ubuntu双系统,ubuntu的dhcp获取IP失败
- 深度 | David Silver全面解读深度强化学习:从基础概念到AlphaGo
- NOIP2016换教室
- MediaPlayer和AudioTrack播放Audio的区别与联系
- DIY网页端的树莓派流畅监控,官方CSI摄像头的正确用法