比如要child1 给child2 传递数据,child1先把数据传递给父组件,再由父组件传递给child2
import React from 'react'; import ReactDOM from 'react-dom'; import './index.scss' class Child1 extends React.Component { constructor(props){ super(props); } handleClick(){ this.props.child2ColorChange('red') } render() { return <div> <p>父组件的背景颜色:{this.props.bgColor}</p> <button onClick={(e)=>this.handleClick(e)}>改变childs的颜色</button> </div> } } class Child2 extends React.Component { constructor(props){ super(props); } render() { return <div style={{background:this.props.bgColor}}> <p>父组件的背景颜色:{this.props.bgColor}</p> </div> } } class Father extends React.Component { constructor(props){ super(props); this.state={ child2BgColor:'#999' } } childBgColorChange(color){ this.setState({ child2BgColor:color }) } render() { return (<div> <Child1 child2ColorChange={(color)=>this. childBgColorChange(color)}/> <Child2 bgColor={this.state.child2BgColor}/> </div>) } } ReactDOM.render( <div> <Father/> </div>, document.getElementById('app') );