React的三大属性

React系列 -- 三大属性 props  refs  state 

  * props 

          组件外部向组件内部传值用，标签属性都挂载在 props上

        步骤：   　　　

             1.父组件调用子组件时传入属性

             2.

         （1） 子组件直接通过this.props.属性名   即可拿到父组件传过来的值　　　

        import React, { Component,Fragment} from 'react';

        //React的props传参

         // 父组件
        class App extends Component {
           render() {
             return (
               <Fragment>
                  <Child aaa="王一博"></Child>
               </Fragment>
          )
        }
      }

　　      // 子组件
        class Child extends Component{
            render(){
               return (
                  <div>{this.props.aaa}</div>
               )
         }
      }

      export default App;

　　　　（2） 传函数　　

                import React, { Component,Fragment} from 'react';             //React的props传参

             // 父组件
           class App extends Component {
             render() {
                return (
                  <Fragment>
                     <Child aaa="红牛" bbb={this.hanshu}></Child>
                  </Fragment>
            )
          }
          hanshu(){
               return  "我是父组件传过来的函数"
           }}

        // 子组件
        class Child extends Component{
           render(){
              return (
                 <div>{this.props.aaa}{this.props.bbb()}</div>
              )
           }
        }

     export default App;

* refs     

    Refs提供了一种允许我们访问DOM节点或在render方法中创建的React元素的方式。
　　　　

            class MyComponent extends React.Component {
              handleClick() {
                     // 使用原生的 DOM API 获取焦点
                    this.refs.myInput.focus();
                 }
              render() {
                    // 当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
                       return (
                           <div>
                               <input type="text" ref="myInput" />
                               <input   type="button"   value="点我输入框获取焦点"     onClick={this.handleClick.bind(this)} />
                          </div>
                          );
                    }
                  }

             ReactDOM.render(
                 <MyComponent />,
                document.getElementById('example')
             );
   * state