React 页面间传值的个人总结

react 组件之间传值的方案有很多，下面是我个人经验的总结
github 地址

props 来传递值 传值方式：

通过props 获取值

通过props 提供的func去修改值

优点：

不需要任何第三方的组件，纯react，非常纯哦

缺点：

代码调试有些麻烦，但是可以react 插件辅助查看到当前react 对象的props

注意事项：

一般在表单页面中用到组件时候会用到props 传递值，需要注意下，最好页面的状态控制都在该页面的顶级节点的state 的，不要尝试获取或控制子节点的state，所以组件内部state是父级节点不关心的

Demo 代码如下：

import React,{Component} from 'react'; import PropTypes from 'prop-types' class ChildNode extends Component{ static PropTypes={ value:PropTypes.string.isRequired, onChange:PropTypes.func.isRequired } render(){ const {value,onChange} = this.props; return ( <div> <span>这里是子节点值：{value}</span><br/> <input type="text" value={value} onChange={(e)=>{ console.log('开始更改值') onChange(e.target.value) }}/> </div> ) } } class Parent extends Component{ state={ childValue:'this is the value of the child node' } onChildValueChange=(val)=>{//注意这里用ES6 的array function 来绑定当前的this this.setState({childValue:val}) } render(){ const {childValue} = this.state; return ( <div> <span>这里是父节点</span> <div> <span>父节点控制子节点的内容</span> <button onClick={()=>{ let childValue = this.state.childValue||"" this.setState({ childValue:childValue+'我最帅！' }) }}>内容直接加上我最帅</button> </div> <br/> <br/> <ChildNode value={childValue} onChange={this.onChildValueChange}/> </div> ) } } export default Parent;