React（脚手架）——create-react-app撸api

新建一个组件News，并且只将他渲染到APP.js中

    import React,{Component} from 'react'
    /*
        
    React中的组件:解决html 标签构建应用的不足
            好处：把公共的功能单独抽离成一个文件，哪里使用哪里引入

            父子组件：组件的相互调用中，调用者称之为父组件，被调用者称之为子组件 比如我在Home.js组件中引入New组件，则Home就是父组件

            父传子：
                1.在调用子组件的时候定义一个属性 

                2.子组件里面this.props.msg
                父组件不仅可以给子组件传值，还可以给子组件传方法，以及把整个父组件传给子组件

            父组件主动获取子组件数据   
                1、调用子组件的时候指定ref的值     
            
                2、通过this.refs.header  获取整个子组件实例  (dom（组件）加载完成以后获取 )


    */ 
    class News extends Component {
        constructor(props) {
            super(props);
            this.state = {  };
        }
        render() {
            return (
                <div>

                </div>
            );
        }
    }

    export default News;

注释看不看无所谓，我们一步步来，父子组件应该很容易区分，这个不多讲

新建一个子组件Header，引入到News父组件中，然后引入

双标签还是单标签看自己习惯，问题不大

在父组件中给予Header模板写了一个属性，子组件就可以通过这个属性接收到值

OK，这是最简单的传值。除了传值还能传递方法

同样我们编写一个方法，并在组件中使用属性传递过去

父组件还可以将自己全部传给子组件，传递this即可

需要注意的就是方法，此时的写法是变量也就是函数表达式不是函数体，不然没法调用，当然这个问题不大

那么此时 this.props.gob就代表了父组件实例，然后调用内部的状态方法即可

父组件获取子组件数据，依旧是这样写法

在父组件中声明一个函数表达式，result用来接收子组件的数据

然后在子组件中使用bind方法传递数据

子组件也可以将自己全部给父组件，再编辑一个子组件

引入子组件footer 在父组件中的 getFoot()方法使用this.refs.footer获取子组件所有数据！

    import React,{Component} from 'react'
    import Header from './Header'
    import Foot from './Footer'
    /*
        
    React中的组件:解决html 标签构建应用的不足
            好处：把公共的功能单独抽离成一个文件，哪里使用哪里引入

            父子组件：组件的相互调用中，调用者称之为父组件，被调用者称之为子组件 比如我在Home.js组件中引入New组件，则Home就是父组件

            父传子：
                1.在调用子组件的时候定义一个属性

                2.子组件里面this.props.msg
                父组件不仅可以给子组件传值，还可以给子组件传方法，以及把整个父组件传给子组件

            父组件主动获取子组件数据   
                1、调用子组件的时候指定ref的值     
            
                2、通过this.refs.** 获取整个子组件实例  (dom（组件）加载完成以后获取 )


    */ 
    class News extends Component {
        constructor(props) {
            super(props);
            this.state = { 
                'title':'News组件是我的父组件',
             };
        }
        handelClick=()=>{
            
           alert('我是父组件的方法')
        }

        getChild=(result)=>{
             
            alert(result)

        }

        getFoot(){
            this.refs.footer.run();
        }
        render() {
            return (
                <div>  
                      <h2>我是父组件</h2>
                       <button onClick={this.getFoot.bind(this)}>获取footer组件的方法</button>
                       <hr/>
                      <Header title={this.state.title}  fun={this.handelClick.bind(this)} gob={this} />
                      <hr/>
                      <Foot ref="footer" />
                </div>
            );
        }
    }

    export default News;

基本用法还是很简单的，没有vue那么复杂