React中的props
来源:互联网 发布:linux获取cpu个数 编辑:程序博客网 时间:2024/04/28 18:03
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!--react.js是React的核心库--> <script src="./build/react.js" charset="utf-8"></script> <!--react-dom.js的作用是提供与DOM相关的功能--> <script src="./build/react-dom.js" charset="utf-8"></script> <!--browser.min.js的作用是JSX语法转换成JavaScript语法--> <script src="./build/browser.min.js" charset="utf-8"></script> </head> <body> <!--React渲染的模板内容会插入到这个DOM节点中,也可以理解为一个容器--> <div id="container"> </div> </body> <!--在React开发中,使用JSX,跟JavaScript不兼容,所以在使用JSX的地方需要设置type="text/babel"--> <!--babel是一个转换编译器,可以将ES6转成可以在浏览器中运行的代码--> <script type="text/babel"> //在此处编写React代码 /** props、state props:是组件自身的属性,一般用于嵌套的内外层组件中,负责传递信息(通常是由父层组件向子层组件传递) 注意:props对象中的属性与组件的属性一一对应,不要去直接去修改props中属性的值 **/ /** 需求:定义一个组件WebShow.功能:输出网站的名字和网址,网址是一个可以点击的链接 分析:定义一个组件WebName负责输出网站名字,定义组件WebLink显示网站的网址,并可以点击 思路: 1、给WebShow设置两个属性,wname,wlink 2、WebShow的props对象增加了两个属性值 3、WebName从WebShow的props对象中获取wname的值,即网站的名称. **/ // // //定义WebName // var WebName=React.createClass({ // render:function(){ // return <h1>{this.props.webname}</h1>; // } // }); // // //定义WebLink // var WebLink=React.createClass({ // render:function(){ // return <a href={this.props.weblink}>{this.props.weblink}</a>; // } // }); // // //定义WebShow // var WebShow =React.createClass({ // render:function(){ // return( // <div> // <WebName webname={this.props.wname}/> // <WebLink weblink={this.props.wlink}/> // </div> // ); // } // }); // // //渲染 // ReactDOM.render( // <WebShow wname="蓝鸥科技" wlink="http://www.hao123.com"/>, // document.getElementById("container") // ); /** ...this.props props提供的语法糖,可以将父组件中的全部属性都复制给子组件 需求:定义一个组件Link,Link组件中只包含一个<a>,我们不给<a>设置任何属性,所有的属性全部从父组件复制得到 **/ // var Link=React.createClass( // { // render:function(){ // return <a {...this.props}>{this.props.name}</a> // } // } // ); // // ReactDOM.render( // <Link href="http://www.hao123.com" name="蓝鸥科技"/>, // document.getElementById("container"); // ); /** this.props.children children是一个例外,它不像props一样跟组件的属性一一对应, 表示组件的所有子节点 Html5中有一种标签:列表 <ul><ol><li> 定义一个列表组件,列表项中显示的内容,以及列表项的数量都由外部决定 **/ // var ListComponent =React.createClass({ // render:function(){ // return ( // <ul> // { // /** // 列表项的数量以及内容不确定,在创建模板时才能确定 // 利用this.props.children从父组件获取需要展示的列表项内容 // // 获取到列表项内容后,需要去遍历children,逐项进行设置 // 使用React.Children.map方法 // 这个方法有返回值:数组对象。这里数组中的元素是<li> // **/ // React.Children.map(this.props.children,function(child){ // //child是遍历得到的父组件的子节点 // return <li>{child}</li> // }) // } // </ul> // ); // } // }); // // ReactDOM.render( // ( // <ListComponent> // <h1>蓝鸥科技</h1> // <a href="http://www.baidu.com">http://www.baidu.com</a> // </ListComponent> // ), // document.getElementById("container") // ); /** 属性验证 propTypes 组件类的属性 用于验证组件实例的属性是否符合要求 **/ // var ShowTitle =React.createClass({ // propTypes:{ // //title数据类型必须为字符串 // title:React.PropTypes.string.isRequired // }, // render:function(){ // return <h1>{this.props.title}</h1> // } // }); // // ReactDOM.render( // <ShowTitle title="123"/>, // document.getElementById("container") // ); /** 设置组件属性的默认值 通过实现组件的getDefaultProps方法,对属性设置默认值 **/ var MyTitle=React.createClass({ getDefaultProps:function(){ return { title:"蓝鸥" }; }, render:function(){ return <h1>{this.props.title}</h1> } }); ReactDOM.render( <MyTitle />, document.getElementById("container") ); </script></html>
0 0
- React中的props
- React中的state&props
- React中的props和state
- React中的props和state
- React中的state和props分析
- React props
- React Props
- 简述React Native中的state,props和成员变量
- React传递Props
- react props传值
- React传递props
- React 之props属性
- React Native 之 Props
- react——props
- react this.props.children
- 第六章 React props
- React 4 props & state
- React删除props数据
- Mapbox 地图SDK极速集成指导
- Subsequence 二分搜索
- No2.新建线程
- [Paper note] Pyramid Scene Parsing Network
- SQLiteOpenHelper
- React中的props
- Java IO流详尽解析
- iOS 设置状态栏的背景颜色
- LINUX驱动异步编程之信号实现梗概
- Tomcat系列之服务器的安装与配置以及各组件详解
- 安卓微信自动抢红包插件优化和实现
- React中state
- 阶乘1
- 关于AFHTTPRequestOperationManager跟AFURLSessionManager的区别