react

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'}};

转载于:https://www.cnblogs.com/reese-blogs/p/5210734.html