react 组件通信 —— 父子传值 【 函数式/类式 】

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>);}
}

 如下图所示：