深入了解React(九、父子组件间通信)
程序员文章站
2024-02-26 22:37:10
...
import React from 'react';
import ReactDOM from 'react-dom';
import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import './index.scss';
class Child extends React.Component {
constructor(props) {
super(props);
}
handleClick() {
this.props.changeColor('blue');
}
render() {
return (
<div>
<h1>父组件的背景色:{this.props.bgColor}</h1>
<p>
<button onClick={(e) => {
this.handleClick(e)
}}>改变父组件背景色bgColor
</button>
</p>
</div>
);
}
}
class Father extends React.Component {
constructor(props) {
console.log('constructor---props:', props);
super(props);
this.state = {
bgColor: '#999'
};
console.log('constructor---props:', props);
}
onBgColorChange() {
this.setState({
bgColor: 'blue'
});
}
render(props) {
console.log('render---props:', props);
return (
<div style={{background: this.state.bgColor}}>
<Child bgColor={this.state.bgColor} changeColor={(color) => {
this.onBgColorChange(color)
}}/>
</div>
)
}
}
class App extends React.Component {
render() {
return (
<div className="">
<Father>
<p><span>App Span</span></p>
<p><a href="">link</a></p>
</Father>
<hr/>
</div>
);
}
}
ReactDOM.render(
<div>
{/*<Component></Component>*/}
<App></App>
</div>,
document.getElementById('app')
);