React 是以组合组件的形式组织的, 组件因为彼此是相互独立的, 从传递信息的内容上看, 几乎所有类型的信息都可以实现传递, 例如字符串, 数组, 对象, 方法或自定义组件等.
所以, 在嵌套关系上, 就会有 3 种不同的可能性: 父组件向子组件通信 (最常见的方式), 子组件向父组件通信和没有嵌套关系的组件之间通信.
在用 React 之前的组件开发模式时, 常常需要接收组件运行时的状态, 这时我们常用的方法有以下两种:
1, 利用回调函数: 这是 JavaScript 灵活方便之处, 这样就可以拿到运行时状态.
2, 利用自定义事件机制: 这种方法更通用, 使用也更广泛. 设计组件时, 考虑加入事件机制往往可以达到简化组件 API 的目的.
在 React 中, 子组件向父组件通信可以使用上面的任意一种方法. 但有时用自定义事件会显然过于复杂, 为了达到目的, 一般会选择较为简单的方法.
子组件向父组件通信一般用回调函数, 父组件事先定义好回调函数. 并将回调函数传递给子组件, 子组件调用回调函数, 向父组件通信.
- // 父组件
- import React,{Component} from 'react';
- import Children from './App';
- class Parent extends Component{
- constructor(props){
- super(props);
- this.state={
- index : 0
- }
- }
- getNumCallback = (num) => {
- this.setState({
- index :num
- })
- alert(this.state.index)
- }
- render(){
- return(
- <div>
- <Children
- date = {this.state.date}
- getNumCallback = {this.getNumCallback.bind(this)}
- />
- </div>
- )
- }
- }
- export default Parent;
- // 子组件
- import React,{Component} from 'react';
- class Children extends Component{
- constructor(props){
- super(props);
- this.state = {
- num : 0
- }
- }
- numClickHander = ()=>{
- this.props.getNumCallback(this.state.num+1)
- this.setState({
- num:this.state.num +1
- })
- }
- render(){
- return(
- <div>
- <button onClick = {this.numClickHander.bind(this)}>{this.state.num}</button>
- </div>
- )
- }
- }
- export default Children;
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/react/16547.html