1、函数式组件通信
父子间通信 —— 父传子
父组件
export default function father() {return (<div style={{width:'400px',height:'200px',background:'pink',marginLeft:'500px'}}>我是父组件<hr /><Son name={"韩小刀"}/></div>)
}子组件
export default function son(props) {return (<div style={{width:'200px',height:'100px',background:'lightgreen'}}>我是子组件<hr />我接受到的父组件的值是:{props.name}</div>)
}如下图所示：
父子间通信 —— 子传父
父组件
export default function father() {// 父组件的数据const [data,setData] = useState('')// 父组件传给子组件的方法const onMessageChange = (message) => {setData(message)}return (<div style={{width:'400px',height:'200px',background:'pink',marginLeft:'500px'}}>我是父组件<div>接收子组件的数据:{data}</div><hr /><B sendMessageData={onMessageChange}/></div>)
}子组件
export default function son({sendMessageData}) {//子组件操作 给父组件传数据const handleData=()=>{sendMessageData('韩小刀')}return (<div style={{ width: "200px", height: "100px", background: "lightgreen" }}>我是子组件<hr /><button onClick={handleData} >点我给父组件传数据</button></div>);
}
如下图所示：
2、类式组件通信
父子间通信 —— 父传子
父组件
export default class Father extends Component {//父组件的状态数据state = {name:'韩小刀'}render() {return (<div style={{width:'400px',height:'200px',background:'pink',marginLeft:'500px'}}>我是父组件<hr /><Son changeDataMessage={this.state.name}/></div>)}
}
子组件
export default class Son extends Component {render() {//接收到父组件的数据const {changeDataMessage} = this.propsreturn (<div style={{ width: "200px", height: "100px", background: "lightgreen" }}>我是子组件<hr />接收到的数据：{changeDataMessage}</div>);}
}
如下图所示：
父子间通信 —— 子传父
父组件
export default class Father extends Component {//state写法一// constructor(props) {// super(props);// // 初始化状态// this.state = {// childMessage: "",// };// }//state写法二state = {name: "",};changeDataMessage = (message) => {this.setState({ name: message });};render() {return (<div style={{width: "400px",height: "200px",background: "pink",marginLeft: "500px",}}>我是父组件 接收到子数据：{this.state.name}<hr /><B changeDataMessage={this.changeDataMessage} /></div>);}
}子组件
export default class Son extends Component {handleMessageData = () => { this.props.changeDataMessage('韩小刀') }render() {return (<div style={{ width: "200px", height: "100px", background: "lightgreen" }}>我是子组件<hr /><button onClick={this.handleMessageData}>点我给父组件传数据</button> </div>);}
}
如下图所示：
