react2

1 属性
props==properties
一个事物的性质与关系,与生俱来,无法改变
2.
React中,组件的属性是由父组件传递过来的,出生时就带有的一些特性

3属性的用法(组件可以根据传入的属性来构建不同的子组件)
用法1键值对方法 在调用组件的时候,传入一个键值对,=左边为属性名,=右边为属性值,属性值

可以是一个字符串‘Tim‘,或者一个js表达式{},或者在外部定义一个变量,组件内部引用。
{ }本意为执行js表达式,可以是数字{123},也可以是字符串{‘Tim‘},或者数组{[1,2,3]}。
<HelloWorld name=‘‘/>
用法2 展开法
var props={ //使用变量定义两个属性
one:‘123‘,
two:321
}
<HelloWorld {...props}/> //三个点表示React调用的时候就自动调用其中的两个属性的值

实例1 (键值对法):
var HelloWorld=React.createClass({
render:function(){
return <p>Hello,{this.props.name?this.props.name:‘world‘}</p>;
},
});
var HelloUniverse=React.createClass({
getInitialState:function(){
return {name:‘‘};
},
handleChange:function(event){
this.setState({name:event.target.value});
},
render:function(){
return <div>
<HelloWorld name={this.state.name}/>
<br/>
<input type=‘text‘ onChange={this.handleChange}/>
</div>
},
});
React.render(
<div style={style}>< HelloUniverse></ HelloUniverse></div>,
document.body

);

实例2 展开法
var HelloWorld=React.creactClass({ //+‘ ‘+这里用空格来分隔字符串
render:function(){
return <p>Hello,{this.props.name1+‘ ‘+this.props.name2}</p>
},
});
var HelloUniverse=React.creactClass({
getInitialState:function(){
return {
name1:‘Tim‘,
name2:‘John‘,
};
},
handleChange:function(event){
this.setState({name:event.target.value});
},
render:function(){
return <div>
<HelloWorld {...this.state}></HelloWorld>
<br/>
<input type=‘text‘ onChange={this.handleChange} />
</div>
},
});

时间: 2024-10-08 15:44:14

react2的相关文章

项目总结-REACT-2

初学react ,做完项目,遇到许多问题.总结一下问题: 1.对于要做的需求的逻辑一定要搞清楚,在具体方面的表现,一定要心理有数然后再去实现代码. 2.样式和功能一定要按照需求文档要求的进行,100%完成需求内容.不要想着用相似的或者改改之前代码就能实现,该写新组建的时候一定要写. 3.写新组建的时候先写好样式,和小部分逻辑代码,然后再把组建放到父组建中进行数据的传递和逻辑 编码风格要注意,变量和函数的命名方面一定要准确和直接,并且驼峰写法.涉及到判断等方面的变量要用is... 比如 isDis

react2 react 遍历数组

<body><!-- React 真实 DOM 将会插入到这里 --><div id="example"></div> <!-- 引入 React --><script src="src/libs/react.js"></script><!-- 引入 JSX 语法格式转换器 --><script src="src/libs/JSXTransformer.j

前端-【学习心得】-react2

今天是除夕,首先恭祝大家新年快乐.新年的确是值得开心的,过去一年过得不好就把它抛到后面,过得好就期待新一年过得更好. 好了,下面继续我们的react之旅. 我们的界面是有许多简单组件组成的,就像我们的身体是由各个器官组成的一样.我们想做一个可以复用的接口,定义它的名字CommentBox,定义这个盒子的组成由标题,列表项和表单组件构成.标题我们直接写在CommentBox里面,对于列表项和表单已经不是单元级别的,所以也把它们定义为组件. 定以组件列表 CommentList var Commen

react-2种方法写法

1. <pagenation onChange={ (pagenum)=>this.onpagenum(pagenum) } /> onpagenum(pagenum){ console.log(pagenum) } 2. <pagenation onChange={ this.onpagenum(pagenum) } onpagenum = (pagenum)=>{ console.log(pagenum) } 原文地址:https://www.cnblogs.com/lu

Demo2

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src=&quo

代码备份 | 博客侧边栏公告(支持HTML代码)(支持JS代码)

博客侧边栏公告(支持HTML代码)(支持JS代码) <div id='btnList'> <a class="ivu-btn ivu-btn-primary" href="https://cn.vuejs.org/v2/api/" target="_blank">Vue</a> <a class="ivu-btn ivu-btn-primary" href="https://