React 组件传值

336 阅读2分钟

父组件向子组件传值

父组件声明属性、方法即可
子组件通过对象解构获取所需属性值
	let {a,b} = this.props
  • ref实现组件之间通信
		 render() {
		        return (
		            <div>
		                <input value={this.state.value} onChange={
		                    (e) => {
		                        this.setState({
		                            value: e.target.value
		                        })
		                    }
		                } />
		                <button onClick={
		                    () => {
		                        this.onAdd(this.state.value);
		                        this.setState({
		                            value: ''
		                        })
		                    }
		                }>
		                    提交
		                </button>
		                <List1 ref="list" />  //  子组件的相关属性均可用 this.refs.list 获取
		            </div>
		        );
		    }
	
	
	    // ref 的用法,可在父组件调用子组件的属性及方法
	    onAdd = (name) => {
	        // this.refs.list.state.data.push({
	        //     name,
	        //     id : ++ this.refs.list.state.num 
	        // })
	        this.refs.list.onAdd(name);
	    }

子组件向父组件传值

依靠 父组件 传下来的 callback 函数执行,改变 父组件的状态,或者把 child 自己的 state 通知 父组件
  • state 定义在父组件,父组件声明一个函数
		  setValue = value => {
		        this.setState({
		            value,
		        })
		    }
  • 子组件标签中执行
		<Child  setValue = {this.setValue}/>
		render() {
	        // 子组件中接收传值
	        this.value = 'haha';
	        const {setValue} = this.props;
	        // 往父组件传值
	        setValue(this.value); 
		}
  • state 定义在子组件
		父组件声明onChange函数
		onChange = value => {
		        console.log(value);
		    }
		
  • 子组件标签执行
		<Child  onChange = {this.onChange}/>
		   render() {
		        const {onChange} = this.props;
		        this.setState({
		            childVal
		        }), () => {
		            // 执行函数传值
		            onChange(this.state.childVal);
		        }
		    }
		
	总结:
		父组件中会声明一个函数(a)用来接收子组件传值
		然后子组件通过父->子组件传值获取父组件中接收值的函数
		利用解构赋值 let {a} = this.props;
		
		在子组件调用a方法
		a(value);

兄弟组件传值

  • 兄弟组件传值是通过父组件为媒介进行传值
	import React, { Component } from 'react';
	class Parent extends Component {
	    constructor(props) {
	        super(props);
	        this.state = {
	            value''
	        }
	    }
	    setValue = value => {
	        this.setState({
	            value
	        })
	    }
	    render() {
	        return (
	            <div>
	                {/* 父组件值 */}
	                {this.state.value}
	                {/* Son1 组件改变value的值 */}
	                <Son1 setValue={this.setValue} />
	                <Son2 value = {this.state.value}/>
	            </div>
	        );
	    }
	}
	class Son1 extends Component {
	    render() {
	        // 获取父组件的setValue方法
	        const { setValue } = this.props;
	        return (
	            <div>
	                A组件
	                {/* change 事件改变父组件中Value的值 */}
	                <input onChange={
	                    (e) => {
	                        this.value = e.target.value
	                        setValue(this.value)
	                    }
	                } />
	            </div>
	        );
	    }
	}
	
	class Son2 extends Component {
	    render() {
	        //  获取父组件的value值
	        let {value} = this.props
	        return (
	            <div>
	                {value}
	            </div>
	        );
	    }
	}
	export default Parent;

上下文取值

	import React, { Component } from 'react';
	import PropTypes from 'prop-types';
	// 顶级公共组件
	class Context extends Component {
	    constructor() {
	        super();
	        this.state = {
	            value'',
	        };
	    }
	    setValue = value => {
	        this.setState({
	            value,
	        })
	    }
	    // 必须,声明了子组件才能获取上下文(this.context)
	    getChildContext() { 
	        return {
	            valuethis.state.value,
	            setValuethis.setValue,
	        };
	    }
	    render() {
	        return (
	            <div>
	                <AParent />
	                <BParent />
	            </div>
	        );
	    }
	}
	// 必需
	Context.childContextTypes = {
	    valuePropTypes.string,
	    setValuePropTypes.func,
	};
	
	// A 的 parent
	class AParent extends Component {
	    render() {
	        return (
	            <div className="card">
	                <A />
	            </div>
	        );
	    }
	}
	// A
	class A extends Component {
	    render() {
	        const { setValue } = this.context;
	        return (
	            <div>
	                我是parentA 下的 A, <input onChange={
	                    (e) => {
	                        this.value = e.target.value
	                        setValue(this.value)
	                    }
	                } />
	            </div>
	        );
	    }
	}
	// 必需
	A.contextTypes = {
	    setValuePropTypes.func,
	};
	
	// B 的 parent
	class BParent extends Component {
	    render() {
	        return (
	            <div className="card">
	                <B />
	            </div>
	        );
	    }
	}
	// B
	class B extends Component {
	    render() {
	        return (
	            <div>
	                我是parentB 下的 B, value是:
	                {this.context.value}
	            </div>
	        );
	    }
	}
	B.contextTypes = {
	    valuePropTypes.string,
	};
	
	
	export default Context;