React.js

props

• 父组件向子组件传值

  <Son userid={123}/>
  

• 在Son组件接收父组件传递过来的值

  <p>接收到的父页面的属性 -- userid: {this.props.userid} username:{this.props.username}</p>
  

  当然也可以在Son页面设置传递参数的类型和默认值

  // 给属性设置类型
  BodyIndex.propTypes = {
      // isRequired 必须的参数
      userid: React.PropTypes.number.isRequired,
      username: React.PropTypes.string
  }
  // 设置默认值
  BodyIndex.defaultProps = {
      username: '哈哈'
  }
  

  设置类型具体参考官方文档

  MyComponent.propTypes = {
   // You can declare that a prop is a specific JS primitive. By default, these
   // are all optional.
   optionalArray: PropTypes.array,
   optionalBool: PropTypes.bool,
   optionalFunc: PropTypes.func,
   optionalNumber: PropTypes.number,
   optionalObject: PropTypes.object,
   optionalString: PropTypes.string,
   optionalSymbol: PropTypes.symbol,
  
   // Anything that can be rendered: numbers, strings, elements or an   array
  // (or fragment) containing these types.
  optionalNode: PropTypes.node,
  
  // A React element.
  optionalElement: PropTypes.element,
  
   // You can also declare that a prop is an instance of a class. This uses
    // JS's instanceof operator.
    optionalMessage: PropTypes.instanceOf(Message),
  
    // You can ensure that your prop is limited to specific values by treating
    // it as an enum.
    optionalEnum: PropTypes.oneOf(['News', 'Photos']),
  
    // An object that could be one of many types
    optionalUnion: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number,
      PropTypes.instanceOf(Message)
    ]),
  
    // An array of a certain type
    optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
  
    // An object with property values of a certain type
    optionalObjectOf: PropTypes.objectOf(PropTypes.number),
  
    // An object taking on a particular shape
    optionalObjectWithShape: PropTypes.shape({
      color: PropTypes.string,
      fontSize: PropTypes.number
    }),
  
    // You can chain any of the above with `isRequired` to make sure a warning
    // is shown if the prop isn't provided.
    requiredFunc: PropTypes.func.isRequired,
  
    // A value of any data type
    requiredAny: PropTypes.any.isRequired,
  
    // You can also specify a custom validator. It should return an Error
    // object if the validation fails. Don't `console.warn` or throw, as this
    // won't work inside `oneOfType`.
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error(
          'Invalid prop `' + propName + '` supplied to' +
          ' `' + componentName + '`. Validation failed.'
        );
      }
    },
  
    // You can also supply a custom validator to `arrayOf` and     `objectOf`.
    // It should return an Error object if the validation fails. The validator
    // will be called for each key in the array or object. The first two
    // arguments of the validator are the array or object itself, and the
    // current item's key.
    customArrayProp: PropTypes.arrayOf(function(propValue, key,       componentName, location, propFullName) {
      if (!/matchme/.test(propValue[key])) {
        return new Error(
          'Invalid prop `' + propFullName + '` supplied to' +
          ' `' + componentName + '`. Validation failed.'
        );
      }
    })
   };
  

• Son组件把从父组件传递过来的属性传递到孙子组件
  通过展开运算符{...this.props},把从父组件传递过来的属性,全部传递给自己的子组件(孙子组件)
  id={1234} 为Son组件自己传递给孙子组件的属性

  <GrandSon {...this.props} id={1234}/>
  

• 在孙子组件调用从Son组件传递过来的属性

  <p>{this.props.userid} {this.props.username} {this.props.id}</p>
  

refs: 是访问到组件内部 DOM 节点唯一可靠的方法

给标签添加ref

<input ref='submitButton' type="button" value='提交' onClick={() => this.changeUserInfo(99)}/>

当想要获取该dom时,通过this.refs.xxx获取

this.refs.submitButton.style.color = 'red';

注意:

• 不要在 render 或 render 之前对 Refs 进行调用;
• 不要滥用 Refs,能不使用,就不要使用!!!

React.js 之Mixins.js的使用(8-6)

• 先npm导入react-mixin

npm install --save react-mixin@2

• 定义一个mixins.js文件

  const MixinLog = {
    //他和普通组件一样,也是有生命周期的
    componentWillMount() {
        console.log('MixinLog--componentWillMount');
    },
    // 定一个公共方法
    log() {
        console.log('abcdefg.......');
    }
  }
  export default MixinLog
  

• 在使用的地方,先导入react-mixin和自己定义的mixins

  import ReactMixin from 'react-mixin';
  import MixinLog from './mixins';
  

• 和设置属性类型一样

  ReactMixin(组件名字.prototype, MixinLog);
  

• 在要使用的地方调用:调用log()方法

  MixinLog.log();
  

  关于 Mixins 的讨论文章
  官方文档
  ES6 下的使用需要安装插件

React.js之CSS(第9章)

• 1.内联样式 (网页开发不推荐使用,不过在React-Native中大量使用)

  缺点是动画、伪类 (hover) 等不能使用

  import React from 'react';
  export default class ComponentHeader extends React.Component {
  render() {
      const styleComponentHeader = {
          header: {
              backgroundColor: '#333333',
              color: '#FFFFFF',
              "padding-top": '15px',
              paddingBottom: '15px'
          },
          // 还可以定义其他的样式
      };
      return (
          <header style={styleComponentHeader.header}>
              <h1>这里是头部</h1>
          </header>
      )
    }
  }
  

• 2.内联样式中的表达式:当点击时,padding-top和paddingBottom变大或变小

  import React from 'react';
  export default class ComponentHeader extends React.Component {
  
  constructor() {
    super();
    this.state = {
        miniHeader: false
    };
  }
  switchHeader() {
    this.setState({
        miniHeader: !this.state.miniHeader
    });
  };
  
  render() {
    const styleComponentHeader = {
        header: {
            backgroundColor: '#333333',
            color: '#FFFFFF',
            "padding-top": this.state.miniHeader ? '3px' : '15px',
            paddingBottom: this.state.miniHeader ? '3px' : '15px'
        },
        // 还可以定义其他的样式
    };
        return (
            <header style={styleComponentHeader.header} onClick={this.switchHeader.bind(this)}>
                <h1>这里是头部</h1>
            </header>
        )
    }
  
  }
  

• 3.CSS模块化 (详见9-3)
  先npm以下三个插件

  "babel-plugin-react-html-attrs": "^2.0.0",
  "style-loader": "^0.13.1",
  "css-loader": "^0.25.0"
  

  使用了babel-plugin-react-html-attrs插件,当给标签添加class就可以直接使用class了

  <h1 class="smallFontSize">这里是头部</h1>
  

  未使用该插件之前不能使用 class,只能使用classname

  <h1 className="smallFontSize">这里是头部</h1>
  

• 4.JSX 样式和 CSS 样式的互转
  工具
  JSX 样式和 CSS 样式的互转
  将右侧的代码复制到要使用的地方,具体使用如下:

  import React from 'react';
  
  export default class ComponentFooter extends React.Component {
  render() {
  
      var footerConvertStyle = {
          "miniFooter": {
              "backgroundColor": "#333333",
              "color": "#ffffff",
              "paddingLeft": "20px",
              "paddingTop": "3px",
              "paddingBottom": "3px"
          },
          "miniFooter_h1": {
              "fontSize": "15px"
          }
      }
      return (
          <footer style={footerConvertStyle.miniFooter}>
              <h1 style={footerConvertStyle.miniFooter_h1}>这是页脚, 一般放置版权的一些信息.</h1>
          </footer>
      )
    }
  }