1.props传值
主要步骤:
在父组件中引用子组件时,在子组件上面写入name1={name2}格式进行传值,name1为子组件中对应的用于接收数据的字段名称,name2为父组件中需要传递到子组件中的值(state中声明的数据);要在子组件中调用父组件的方法修改父组件的值可以用同样的方法将函数传入到子组件。相关代码如下:
父组件:parent.js
import React, { Component } from "react";
import Son from "./son";
export class parent extends Component {
state = {
name: "前端大佬",
msg: "哈哈哈",
};
// 如果要用子组件改父组件的值就触发该方法
parentChange = (data) => {
this.setState({ msg: data });
};
render() {
let { name, msg } = this.state;
return (
<div>
<h1>parent page</h1>
<p>姓名:{name}</p>
<p>信息:{msg}</p>
<Son name={name} msg={msg} parentChange={this.parentChange} />
{/* {...this.state}传递state中的所有值 */}
{/* <Son {...this.state} parentChange={this.parentChange}