React传递参数的方式是什么

这篇“React传递参数的方式是什么”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“React传递参数的方式是什么”文章吧。

创新互联-专业网站定制、快速模板网站建设、高性价比江宁网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式江宁网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖江宁地区。费用合理售后完善，10余年实体公司更值得信赖。

父子组件之间传递参数

父组件往子组件传值，直接用this.props就可以实现

在父组件中，给需要传递数据的子组件添加一个自定义属性，在子组件中通过this.props就可以获取到父组件传递过去的数据

// 父组件
 render() {
        return (
                // 使用自定义属性传递需要传递的方法或者参数
                
            )
    } 

//子组件　
//通过this.props.toson就可以获取到父组件传递过来的数据

如果还需要往孙组件传递那么在子组件通过自定义属性继续传递就行了

tograndson={this.props.toson}

孙组件通过this.props.tograndson获取到数据

子组件给父组件传值的话，需要在父组件设置接收函数和state，同时将函数名通过props传递给子组件

也就是给子组件传入父组件的方法，在子组件进行调用

//孙子组件
export default class Grandson extends Component{
    render(){
        return (
            
　　　　　　　　{this.props.name}：
                
                    男
                    女

) } }; //子组件 export default class Child extends Component{ render(){ return ( {this.props.name}：

) } }; //父组件 export default class Parent extends Component{ constructor(props){ super(props) this.state={ username: '', sex: '' } }, handleVal(event){ this.setState({username: event.target.value}); }, handleSelect(value) { this.setState({sex: event.target.value}); }, render(){ return (

用户姓名：{this.state.username}

用户性别：{this.state.sex}

) } }

前一段时间有人问过我这样一个问题，constructor里面的super()是干嘛用的？

总结一下：

如果要在子类的constructor里使用this，必须调用父类constructor，否则就拿不到this

那么问题就来了，如何调用父类的constructor呢？通过super()

如果要在constructor里使用父组件传递过来的参数，必须在调用父组件super时，传递参数给父组件的constructor

如果不在constructor里面使用this，或者参数，就不需要super ；因为React以及帮你做了this，props的绑定

路由传参

安装 npm install react-router-dom --save-dev

定义路由(一般会放在外面)

当页面跳转时

　this.props.history.push({
　　　pathname:'/detail',
    　 state:{id:3}
})}
>

接收通过this.props.history.location可以获取到传递过来的数据

路由传参可能会有这个问题，就是只有在路由定义时挂载的组件中才会有props里面的location history match

路由上挂载的那个组件一般都是Container.js，一般我们会往下分出UI.js组件，在这里面进行点击跳转，UI组件props里没有location history match

需要用到高阶组件withRouter

状态提升

将多个组件需要共享的状态提升到离他们最近的那个公共父组件上，然后父组件通过props分发给子组件

context

当某个组件在自己的context中保存了某个状态，那个该组件下的所有子孙组件都可以访问到这个状态，不需要中间组件的传递，而这个组件的父组件是没办法访问的

class Index extends Component {
  static childContextTypes = {
    themeColor: PropTypes.string
  }

  constructor () {
    super()
    this.state = { themeColor: 'red' }
  }

  getChildContext () {
    return { themeColor: this.state.themeColor }
  }

  render () {
    return (
      
        
        
      
    )
  }
}

通过getChildContext()将属性传递给所有的子孙组件
提供 context 的组件必须提供 childContextTypes 作为 context 的声明和验证。

class Title extends Component {
  static contextTypes = {
    themeColor: PropTypes.string
  }

  render () {
    return (
      标题
    )
  }
}

子组件要获取 context 里面的内容的话，就必须写 contextTypes 来声明和验证你需要获取的状态的类型，它也是必写的，如果你不写就无法获取 context 里面的状态。
Title 想获取 themeColor，它是一个字符串，我们就在 contextTypes 里面进行声明。

引入redux

redux为React提供可预测化的状态管理机制

redux将整个应用状态存储到store,store里保存着一个state状态树

组件可以派发(dispatch) 行为 (action) 给store , 而不是直接通知其它组件

其它组件可以通过订阅store中的状态state来刷新自己的视图

以上就是关于“React传递参数的方式是什么”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。

分享文章：React传递参数的方式是什么
本文网址：http://ybzwz.com/article/jpppij.html