react组件传参

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

非相关组件传参

非组件传值（子传给父，父再传给另一个子）

来源：CSDN

作者：qfzxcn

链接：https://blog.csdn.net/qfzxcn/article/details/104455574