react组件之间传值

前言

          在做项目的过程中组件之间不可避免的要进行传值的操作, 本人写react也已经写了一年多了,现在总结一下react组件之间的传值方式,希望能为您带来帮助.

传值方式

          1.父子组件之间传值

            1.在父组件中需要引入子组件, 使用的时候跟标签的写法一样,父组件把要传的值写到子组件里,子组件通过this.props.name来获取父组件传递过来的值,

             2.子组件传值给父组件: 父组件可以将方法传递给子组件然后通过子组件通过传递过来的方法传值

            例如:

            父组件:

import React, {useState} from 'react';
import PersonHead from './component/PersonHead';

export default class PaymentDetail extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			headData:'tets',
		}
        this.headDataMethod=this.headDataMethod.bind(this);
	}
    headDataMethod=(data)=>{
        console.log(data)
    }
	render() {
		return (
			<div>
			    <PersonHead
			    headData={this.state.headData}
                headDataMethod={this.headDataMethod}
				/>
			</div>
		)
	}
}

       子组件:

          

import React, {useState} from 'react';
import {
	Button
} from "antd";
import moment from 'moment';

// 意向方案详情个人信息头部
export default class PersonHead extends React.Component {
	constructor(props) {
		super(props);
	}
	render() {
		let statusData = this.props.status;
		let statusText='';
		return (
			<div className="personHeadStyle">
				<div>
					<span className='personalDetail'>{this.props.headData}</span>
				</div>
		        <Button onCLick={()=>this.props.headDataMethod('123')}>
                </Button>

			</div>
		)
	}
}

 2.兄弟组件之间传值

     兄弟组件之间传值有三种方式

     1.通过一个中间组件,例如一个子组件传给父组件,再由父组件传递给另外一个子组件,不过这种只适用于结构简单的,如果隔了很多层级的话不推荐使用

      2.使用redux,可以参考下面链接:

      https://www.jianshu.com/p/5726bb042bda