react子组件如何向父组件传值_angular子组件向父组件传值

React组件传值，父传子，子传父，父调用子方法，子调用父方法，使用redux情况下如何调用子方法

该篇文章所使用的方法，是react提供的父子页面数据交互，如果熟练掌握react-redux，可以完全省略以下内容。。。
个人还是比较喜欢这种直接传值方法的，比较直接，简单易懂（主要是因为一开始redux运用的不熟练）在一些大型的项目开发当中，一定会用到redux，请各位同学要好好练习，今后会对redux做一个专门的整理。

• 父组件的值传递给子组件

class TodoList extends Component { 
   
	constructor(props) { 
   
		super(props);
		this.state = { 
   
			inputValue: '传我，传我'
		}
	}
	render() { 
   
		return (
			<Children childData={ 
   this.state.inputValue} /> //Children是子组件的名称，childData是自己起的名字，inputValue是父组件state中定义的状态
		)
	}
export default TodoList;

上面代码中，我们需要先给子组件设置一个属性，这个属性名称随你喜好，然后把父组件state中的需要传递的数据和子组件的这个属性绑定，绑定方法就是childData={this.state.inputValue}，这样父组件中的工作就完成了。然后是子组件中如何使用，如下：

class Children extends Component { 
   

	constructor(props) { 
   
		super(props)
	}
	render() { 
   
		return (
			<div onClick={ 
   this.handleClick}>
				<p> 点我触发事件</p>
			</div>
		)
	}
	handleClick = () => { 
   
		console.log(this.props.childData);
	}
}

通过props拿到之前在父页面中绑定的属性。

• 父组件的方法，怎么传递给子组件

class TodoList extends Component { 
   
   constructor(props) { 
   
   	super(props);
   	this.state = { 
   
   		inputValue: '传我，传我'
   	}
   }
   render() { 
   
   	return (
   			<div onClick={ 
   this.onClick}>点击触发</div>
   			<Children
   				childData={ 
   this.state.inputValue}
   				childClick={ 
   this.onClick}
   			/> //Children是子组件的名称，childData是自己起的名字，inputValue是父组件state中定义的状态
   		)
   }
   onClick = () => { 
   
   	console.log('父组件事件触发');
   }
export default TodoList;

子组件中使用父组件的方法时，同样的需要从props中拿到绑定好的方法,下面为子组件

render() { 
   
		return (
			<div onClick={ 
   this.handleClick}>
				点击触发
			</div>)
	}
	handleClick() { 
   
		let { 
    childClick } = this.props;
		childClick()
	}

• 说完父传子，该子传给父了

还是上面的代码，子传给父只要把执行父方法的时候，把要传递的数据，当作参数，传递给父就可以了

render() { 
   
		return (
			<div onClick={ 
   this.handleClick}>
				点击触发
			</div>)
	}
	handleClick() { 
   
		let { 
    childClick } = this.props;
		childClick(this.state.data)//这个this.state.data就是存在子里面的数据，要传递给父
	}

父组件别忘了在自己的方法里，接收一下子传递过来的参数

class TodoList extends Component { 
   
	constructor(props) { 
   
		super(props);
		this.state = { 
   
			inputValue: '传我，传我'
		}
	}
	render() { 
   
		return (
				<div onClick={ 
   this.onClick}>点击触发</div>
				<Children
					childData={ 
   this.state.inputValue}
					childClick={ 
   this.onClick}
				/> 
			)
	}
	onClick = (data) => { 
   
		console.log('子传递过来的数据'， data);//这里接收了子传递过来的数据
	}
export default TodoList;

OK，父子间传值，传方法，Lv1，已经学会了，接下来Lv2

• 子组件的方法怎么传递给父组件

这个需要分类讨论了，在没有使用redux的时候，情况如下

class TodoList extends Component { 
   
	constructor(props) { 
   
		super(props);
		this.state = { 
   
			inputValue: '传我，传我'
		}
	}
	render() { 
   
		return (
				<Children onRef={ 
   this.onRef} /> //可以简写成onRef={(el) => this.onRef = el } 写成这种形式，下方的onRef也可以省略了

                <button onClick={ 
   this.click} >click</button>
			)
	}
	onRef = (ref) => { 
   
		this.Children = ref;
	}
	onClick = () => { 
   
		this.Children.childClick()
	}
export default TodoList;

下面是子组件，需要先通过父组件中绑定的onRef，把子组件传递过去

componentDidMount(){ 
   
        this.props.onRef(this)
    }

react中this表示的是组件本身，这里是通过执行父组件的onRef方法，把this（子组件）传递给父组件，然后在父组件中就可以调用了，上面生命后期表示，在组件完成挂载后，去把this传给父

• 最后一个问题，一般项目或者实际开发中，都会使用到react-redux来管理状态，在使用了redux后，上面的父调子方法就不管用了，那么怎么解决

导致上面哪种方法失效的原因是redux属于高阶组件，他会包裹住我们的子组件，导致ref无法获取，解决方法是在连接器的参数上设置一下

//使用了redux后会设置连接器
export default connect(stateToProps, null, null, { 
    withRef: true })(Children)

//正常暴露组件的形式
export default Children

注意：这个是子组件最下面的连接器，因为使用了redux，我们的子组件不是直接被暴露出去的，所以导致父组件无法直接通过onRef获取到
当然withRef开启后，还是不能直接使用，父组件在调用子方法的时候，需要增加如下使用

onClick = () => { 
   
	this.Children.getWrappedInstance.childClick();
}

上面就是父子组件之间，传值的所有方法了，最后一种方法可能不太好记忆，我个人最开始是记住子组件用了redux之后，就会比较皮，因为他能获取到所有的state，所以会不服管教，这时候需要在他的屁股上（最下方）盖一个戳儿，告诉他，你得乖乖的，让父亲指挥你，让你干嘛你干嘛，当然父亲手里得拿一个鸡毛掸子（getWrappedInstance）才能震慑住他，因为他盖完戳儿了还是很皮，还是能获取到所有state
当你弄明白redux的使用规则的时候，就不用这么麻烦的记忆了，可能有时候项目比较简单，没必要使用到redux，完全可以只用父子传值搞定。

推荐大家看一下张培小姐姐的关于withRef的使用，能更好理解
https://www.jianshu.com/p/b567056c9d09

今天的文章react子组件如何向父组件传值_angular子组件向父组件传值分享到此就结束了，感谢您的阅读。