React 关于组件(界面)更新

在最近在学 React ， 将组件的UI更新稍微整理了一下。

根据业务要求，可能会出现如下的技术实现要求：
1.更新自己
2.更新子组件
3.更新兄弟组件
4.更新父组件
5.父 call 子  function 
6.子 call 父  function

整理代码如下：
更新自己：

import React, { Component } from 'react';
import { Button } from 'antd';

class Me extends Component {
    constructor(props){
        super(props)
        this.state = {  Val :10  }
        this.handleClick = this.handleClick.bind( this );
    }

    handleClick(e) {
        e.preventDefault();
        console.log('The link was clicked.');

        this.setState({
            Val: 100
        });
    }

    render() {
        return (
            <div style={{   width:800,  height:400, backgroundColor:"#FF0000"  }} >
                <span> myValue { this.state.Val } aaa</span>
                <Button onClick={ this.handleClick } >更新自己 </Button>

            </div>
        );
    }
}
export default Me;

 

更新儿子

class Son extends Component {
    constructor(props){
        super(props)
        //this.state = {  SonVal :10  }

    }

    render() {
        return (
            <div style={{   width:300,  height:200, backgroundColor:"#00FF00"  }} >
                <span> sonValue { this.props.SonVal } aaa</span>


            </div>
        );
    }
}

export default Son;

 

class Me extends Component {
    constructor(props){
        super(props)
        this.state = {  Val :10, SonVal :20  }
        this.handleClick = this.handleClick.bind( this );
        this.handleClick4Son = this.handleClick4Son.bind( this );
    }

    handleClick(e) {
        e.preventDefault();
        console.log('The link was clicked.');

        this.setState({
            Val: this.state.Val+100
        });
    }

    handleClick4Son(e) {
        e.preventDefault();


        this.setState({
            SonVal: this.state.SonVal+100
        });
    }

    render() {
        return (
            <div style={{   width:800,  height:400, backgroundColor:"#FF0000"  }} >
                <span> myValue { this.state.Val } aaa</span>
                <Button onClick={ this.handleClick } >更新自己 </Button>
                <Button onClick={ this.handleClick4Son } >更新儿子 </Button>

                <Son SonVal={ this.state.SonVal +11 } />

            </div>
        );
    }
}

 

更新兄弟:

更新兄弟， 就需要和老爹相关了， 老爹组件 App (只是命名，可以叫其他) ：

import Me from './component/Me'
import Brother from "./component/Brother";

class App extends Component {

    constructor(props){
        super(props)
        this.state = {   My2SonVal :30  }
        this.onMy2SonValChangle = this.onMy2SonValChangle.bind( this );

    }

    onMy2SonValChangle(e)  {

        this.setState({
            My2SonVal: e
        });
    }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>

         <Me   chagleBrother={ this.onMy2SonValChangle } />
          <Brother BrotherVal={ this.state.My2SonVal }/>

      </div>
    );
  }
}

　　

 

兄弟：

class Brother extends Component {
    constructor(props){
        super(props)
        //this.state = {  SonVal :10  }

    }

    render() {
        return (
            <div style={{   width:300,  height:200, backgroundColor:"#00FFFF"  }} >
                <span> brotherValue { this.props.BrotherVal }  </span>

            </div>
        );
    }
}

export default Brother;

自己：

class Me extends Component {
    constructor(props){
        super(props)
        this.state = {  Val :10, SonVal :20, BrotherVal:30  }
        this.handleClick = this.handleClick.bind( this );
        this.handleClick4Son = this.handleClick4Son.bind( this );
        this.handleClick4Brother = this.handleClick4Brother.bind( this );

    }

    handleClick(e) {
        e.preventDefault();
        console.log('The link was clicked.');

        this.setState({
            Val: this.state.Val+100
        });
    }

    handleClick4Son(e) {
        e.preventDefault();


        this.setState({
            SonVal: this.state.SonVal+100
        });
    }

    handleClick4Brother(e) {
        e.preventDefault();

        this.state.BrotherVal = this.state.BrotherVal+100
        this.props.chagleBrother( this.state.BrotherVal )

    }



    render() {
        return (
            <div style={{   width:800,  height:400, backgroundColor:"#FF0000"  }} >
                <span> myValue { this.state.Val } aaa</span>
                <Button onClick={ this.handleClick } >更新自己 </Button>
                <Button onClick={ this.handleClick4Son } >更新儿子 </Button>
                <Button onClick={ this.handleClick4Brother } >更新兄弟 </Button>

                <Son SonVal={ this.state.SonVal +11 } />

            </div>
        );
    }
}
export default Me;

 

自此我们已经完成了： 更新自己， 更新子组件，更新兄弟组件，更新父组件（调整一下更新兄弟组件代码）， 子 call 父 function 
还需要完成： 父  call 子 

class Me2 extends Component {
    constructor(props){
        super(props)
        this.onSetChild =  this.onSetChild.bind(this);
        this.handleClick =  this.handleClick.bind(this);
    }
    render() {
        return(
            <div styles = { { width :200, height:300, backgroundColor:"#4400FF" } }>
                <Child fatherCall={ this.onSetChild } />
                <button onClick={this.handleClick} >click</button>
            </div>
        )
    }

    onSetChild(  childObj   ){
        this.child = childObj;
    }

    handleClick() {
        this.child.sonFunction()
    }

}

class Child extends Component {
    componentDidMount(){
        this.props.fatherCall(this)
    }

    sonFunction(){
        console.log('sonFunction --------- ')
    }

    render() {
        return ( <div> son Txt </div> )
    }
};


export default   Me2;