react-组件间传参
父组件向子组件传参
父传子通过(props)属性向子组件的attr中传值
父组件 parent.js
import React, { Component } from "react";
import Child from "../child";
export default class Parent extends Component {
constructor(props) {
super(props);
this.state = {
name: "zhangsan",
};
}
render() {
return (
<div>
parent
{/* 父组件通过props,向子组件attr属性把state中的值传给子组件 */}
<Child name={this.state.name} />
</div>
);
}
}
子组件Child.js
import React, { Component } from "react";
export default class Child extends Component {
render() {
// 子组件通过props接受
let { name } = this.props;
return <div>父组件传来的参数{name}</div>;
}
}
子传父
子组件向父组件传参,需要通过事件进行触发,子组件调用父组件的方法并把值传递给父组件
parent.js
import React, { Component } from "react";
import Child from "../child";
export default class Parent extends Component {
constructor(props) {
super(props);
this.state = {
name: "",
};
}
add = name => {
this.setState({
name: name,
});
};
render() {
return (
<div>
{/* 父组件先将获取子组件的方法传给子组件 */}
<Child add={this.add} />
{this.state.name}
</div>
);
}
}
child.js
import React, { Component } from "react";
export default class Child extends Component {
constructor(props) {
super(props);
this.state = {
name: "lisi",
};
}
componentDidMount() {
// 子组件通过调用父组件传过来的方法把值传给父组件
this.props.add(this.state.name);
}
render() {
return <div>123</div>;
}
}
非相关组件传参
非组件传值(子传给父,父再传给另一个子)