本质就是先把一个子组件数据传输到父组件,然后通过父组件传输到另外一个子组件,这样就实现了兄弟间组件的通信
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_1 extends React.Component {
constructor(props) {
super(props);
}
handleClick() {
this.props.changeChild_2Color('blue');
}
render() {
return (
<div>
<h1>Child_1:{this.props.bgColor}</h1>
<p>
<button onClick={(e) => {
this.handleClick(e)
}}>改变Child_2背景色bgColor
</button>
</p>
</div>
);
}
}
class Child_2 extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div style={{backgroundColor: this.props.bgColor}}>
<h1>child_2背景色:{this.props.bgColor}</h1>
</div>
);
}
}
class Father extends React.Component {
constructor(props) {
console.log('constructor---props:', props);
super(props);
this.state = {
child_2BgColor: '#999'
};
console.log('constructor---props:', props);
}
onChild_2BgColorChange(color) {
this.setState({
child_2BgColor: color
});
}
render(props) {
console.log('render---props:', props);
return (
<div>
<Child_1 changeChild_2Color={(color) => {
this.onChild_2BgColorChange(color)
}}/>
<Child_2 bgColor={this.state.child_2BgColor}/>
</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')
);