在最近在学 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 : }
this.handleClick = this.handleClick.bind( this );
}
handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
this.setState({
Val:
});
}
render() {
return (
<div style={{ width:, height:, 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:, height:, backgroundColor:"#00FF00" }} >
<span> sonValue { this.props.SonVal } aaa</span>
</div>
);
}
}
export default Son;
class Me extends Component {
constructor(props){
super(props)
this.state = { Val :, SonVal : }
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+
});
}
handleClick4Son(e) {
e.preventDefault();
this.setState({
SonVal: this.state.SonVal+
});
}
render() {
return (
<div style={{ width:, height:, backgroundColor:"#FF0000" }} >
<span> myValue { this.state.Val } aaa</span>
<Button onClick={ this.handleClick } >更新自己 </Button>
<Button onClick={ this.handleClick4Son } >更新儿子 </Button>
<Son SonVal={ this.state.SonVal + } />
</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:, height:, backgroundColor:"#00FFFF" }} >
<span> brotherValue { this.props.BrotherVal } </span>
</div>
);
}
}
export default Brother;
自己：
class Me extends Component {
constructor(props){
super(props)
this.state = { Val :, SonVal :, BrotherVal: }
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+
});
}
handleClick4Son(e) {
e.preventDefault();
this.setState({
SonVal: this.state.SonVal+
});
}
handleClick4Brother(e) {
e.preventDefault();
this.state.BrotherVal = this.state.BrotherVal+
this.props.chagleBrother( this.state.BrotherVal )
}
render() {
return (
<div style={{ width:, height:, 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 + } />
</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 :, height:, 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;