recat组件介绍

1.组件介绍

1.1 React中组件主要可分为函数组件和类组件，两者区别是函数组件没有state和生命周期，故函数组件也称为 stateless functional components， 适用于仅进行简单渲染操作的组件。

1.2 函数组件是：

	**1   引入React模块**

	** 2    声明函数 function 组件名(){  return jsx }**

      **3	向外暴露  export default 组件名**

例：

import React from 'react';

function ReactHeader() {
  return jsx
}
export default 组件名;

1.3 类组件是：

步骤：
class组件

1.引入React模块

2.声明类  class 组件名  extends React.Component{  render(){  return   jsx  }   }

3.向外暴露  export default 组件名

例：

import React from 'react';
class Father extends React.Component{
	 render(){
        return (
            <React.Fragment>
             jsx
            </React.Fragment>
        );
    }

}

export default Father;

2.父传子组件：

父–传—>子: 用props属性

例：
父组件：

constructor(props){
    super(props)
    this.state={
      message:"i am from parent"
    }
  }
  render(){
    return(
          <Child txt={this.state.message}/>
    )
  }
}

子组件：

render(){
    return(
          <p>{this.props.txt}</p>
    )
  }

整体效果：

import React from "react";
import ReactDOM from "react-dom";

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.Foo = this.Foo.bind(this);
    this.state = {
      name: "zzt"
    };
  }
  Foo(data) {
    this.setState({
      name: data
    });
  }
  render() {
    return (
      <div>
        <div>{this.state.name}</div>
        <Son data={this.Foo}/>
      </div>
    );
  }
}
class Son extends React.Component {
  handleClick = () => {
    this.props.data("zizhoutong");
  };
  render() {
    return <button onClick={this.handleClick}>change parent</button>;
  }
}
ReactDOM.render(<Parent />, document.getElementById("root"));

3.子传父组件：

子组件 --> 父组件

步骤：

	1、在父组件中声明一个函数，用于接收子组件的传值

	2、通过组件属性的方法，把函数传递给子组件

	3、在子组件中通过props属性调用父组件的函数，并通过参数传值

	4、在父组件中的函数通过形参接收子组件的传值
	
	例：

这个是父组件：

import React, {Component} from 'react'
import Children from './Children'

export default class Parent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            name: '我是父组件',
            msg: '父组件传值给子组件',
            childrenMsg: ''
        }
    }

    getChildrenMsg = (result, msg) => {
        // console.log(result, msg)
        // 很奇怪这里的result就是子组件那bind的第一个参数this，msg是第二个参数
        this.setState({
            childrenMsg: msg
        })
    }

    render() {
        return (
            <div>
                <h2>{ this.state.name }</h2>
                <h3>子组件传来的值为：{ this.state.childrenMsg }</h3>
                <h3>我要引入子组件了：</h3>
                <hr/>
                <Children parent={ this } />
            </div>
        )
    }
}

这是子组件

import React, {Component} from 'react'

export default class Children extends Component {
    constructor(props) {
        super(props)
        this.state = {
            name: '我是子组件',
            msg: '子组件传值给父组件'
        }
    }

    toParent = () => {
        // console.log(this.props.parent.getChildrenMsg.bind(this, this.state.msg))
        this.props.parent.getChildrenMsg(this, this.state.msg)
    }

    render() {
        return (
            <div>
                <h2>{ this.state.name }</h2>
                <button onClick={ this.toParent }>子组件传入给父组件</button>
            </div>
        )
    }
}

4.兄弟组件

两个兄弟组件之间会有一个共同的父组件，我们都是结合父子传值的方式来实现兄弟之间的传值的，即先其中一个子组件（兄弟组件）向父组件传值，然后父组件接收到这个值之后再将值传递给另外一个子组件（兄弟组件）

这是父组件：

import React from 'react';
import Son1 from './Son1';
import Son2  from './Son2';

class Father extends React.Component{
    constructor(){
        super()
        this.state={
            mess:''
        }  
    }

     getmess(msg){
        this.setState({
            mass:msg
        })
        console.log('哈哈哈哈哈')
    }

    render(){
        return(
            <React.Fragment>
                <Son1 cc={this.getmess.bind(this)}></Son1>
                <hr/>
                <Son2 ff={this.state.mass}></Son2>
            </React.Fragment>
        )
    }
}
export default Father;

这是子组件1：

import React from 'react';

class Son1 extends React.Component{
    btn(){
        this.props.cc('今天星期五。。。')
    }
    render(){
        return(
            <React.Fragment>
                <button onClick={this.btn.bind(this)}>这是son1里面的数据</button>
            </React.Fragment>
        )
    }
}
export default Son1;

这是子组件2

import React from 'react';

class Son2 extends React.Component{
    render(){
        return(
            <React.Fragment>
                <h1> 在Son2.js中展示Son.js中生成的数据，这个是Father.js传过来的，数据是：</h1>
                {this.props.ff}
            </React.Fragment>
        )
    }
}
export default Son2;