react-基础(1)

props

创建组件

React.createClass;

直接继承

React.Component

;与上面不同的是初始化

props

和

state

的方法；

export class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
}
tick() {
this.setState({count: this.state.count + 1});
}
render() {
return (
<div onClick={this.tick.bind(this)}>
Clicks: {this.state.count}
</div>
);
}
}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };

组件属性

class

和

for

是

JavaScript

的保留字,改用

className, HtmlFor

;

this.props

this.props

对象的属性与组件的属性一一对应

但是有一个例外，就是

this.props.children

, 它表示组件的所有子节点;可以用来控制其他组件插入的位置

注意，只有当子节点多余1个时,

this.props.children

才是一个数组,否则是不能用

map

方法;

一次性插入多个属性:

{...props}

;

var App = React.createClass({
render: function () {
var props = {name: 'name', age: 'age'};
return (<div {...props}></div>)
}
});
//
var BHeart = React.createClass({
render: function () {
return (<span {...this.props} >Heart</span>)
}
});
//
<Component {...this.props} more="values" />

PropTypes属性

验证组件实例的属性是否符合要求,否则报

Warning

;

检验类型，之检验存在的

props

;

propTypes: {
// are all optional.
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
// A React element.
optionalElement: React.PropTypes.element,
//JS's instanceof operator.
optionalMessage: React.PropTypes.instanceOf(Message),
// it as an enum.
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
// An object that could be one of many types
optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]),
// An array of a certain type
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
// An object with property values of a certain type
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
// An object taking on a particular shape
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
})
}

检验是否存在

propTypes: {
requiredFunc: React.PropTypes.func.isRequired
}

特定的检验

propTypes: {
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error('Validation failed!');
}
}
}

getDefaultProps

方法

可以用来设置组件属性的默认值;

var MyTitle = React.createClass({
getDefaultProps : function () {
return {
title : 'Hello World'
};
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});

验证有且只有一个子元素;

var MyComponent = React.createClass({
propTypes: {
children: React.PropTypes.element.isRequired
},

render: function() {
return (
<div>
{this.props.children} // This must be exactly one element or it will throw.
</div>
);
}

});

验证有且有多个元素；

propTypes: {
children: React.PropTypes.arrayOf(React.PropTypes.element).isRequired
}

测试时输出组件

<FancyCheckbox checked={true} onClick={console.log.bind(console)} />

状态机

getInitialState

方法初始化;

this.setState

方法

改变状态；每次会触发重新渲染 UI；

var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});

可以定义一个回调函数；

this.props

和

this.state

都用于描述组件的特性;前者表示那些一旦定义，就不再改变的特性，而后者是会随着用户互动而产生变化的特性。

虚拟DOM

this.refs

ref

: 向下搜索，可以定义在当前节点上，也可以定义在当前子组件上再向下查找；

使用函数定义:

componentDidMount: function() {
this._input.focus();
},
render: function() {
return <TextInput ref={(c) => this._input = c} } />;
}

//
render: function() {
return (
<TextInput
ref={function(input) {
if (input != null) {
input.focus();
}
}} />
);
},

调用其他组件的方法

调用下层组件方法

var InputComponet = React.createClass({
reset: function (value) {
console.log(value);
},
render: function () {
return(
<input/>)
}
})
var Btn = React.createClass({
change: function(event){
this.refs.myInput.reset('value');
},
render: function() {
return (
<div>
<button onClick={this.click}>
<InputComponet  ref='myInput'/>
</div>
);
}
});

调用上层组件方法

var Btn = React.createClass({
click: function () {
this.props.click('value');
},
render: function () {
return(
<button onClick={this.click} />)
}
})
var Div = React.createClass({
click: function(value){
console.log(value)
},
render: function() {
return (
<div>
<Btn click={this.click}>
</div>
);
}
});

React.findDOMNode方法

从组件获取真实

DOM

的节点;

var MyComponent = React.createClass({
handleClick: function() {
React.findDOMNode(this.refs.myTextInput).focus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
});

getDOMNode

: 与

React.findDOMNode

类似，但考虑到

es6

应该弃用;

定义元素属性:

data-x, aria-x

;

定义样式:

style={{display: 'none'}}

;