详解react如何在组件中得到路由参数,react开辟教程之React

by admin on 2019年6月8日

一、父组件向子组件传递参数

那二日学习了React以为组件通讯那么些地点知识点挺多的,而且很重点,所以,前几天加多一点小笔记。

正文介绍了React 子组件向父组件传值的格局,分享给我们

路由参数

class Child extends Component {
    componentDidMount(){
      let name = this.props.default;
      console,log(name);
    }
    render(){
      const { default} = this.props;
      return (
        <Input />
      )
   }
}


import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {
  state = {
    name: 'Bob'
  }
  render() {
    return (
      <div>
        <Child default={this.state.name} />
      </div>
    )
  }
}

老爹和儿子组件通信

子组件必要调整本人的 state,
然后报告父组件本身的state,通过props调用父组件中用来支配state的函数,在父组件中彰显子组件的state变化。

借使我们有诸多 list
页面,那些页面除了动态内容不1,别的的页面部分都大同小异,今年要求怎么布局路由和组件呢?

二、子组件向父组件传递参数

电视发表花招

/***实现在输入框输入邮箱时,在div中即时显示输入内容***/


<body>
  <div id="test"></div>
</body>

//子组件
var Child = React.createClass({
  render: function(){
    return (
      <div>
        邮箱:<input onChange={this.props.handleEmail}/>
      </div>
    )
  }
});

//父组件
var Parent = React.createClass({
  getInitialState: function(){
    return {
      email: ''
    }
  },
  handleEmail: function(event){
    this.setState({email: event.target.value});
  },
  render: function(){
    return (
      <div>
        <div>邮箱:{this.state.email}</div>
        <Child name="email" handleEmail={this.handleEmail.bind(this)}/>
      </div>
    )
  }
});
React.render(
 <Parent />,
 document.getElementById('test')
);

这种景观就须求用到路由的参数成效,扩张一条包蕴参数的路由配置。

class Child extends Component {
    state={
      name:'Bob'
    }
    componentDidMount(){
      this.props.toParent(this.state.name);
    }
    render(){
      return (
        <Input />
      )
   }
}


import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {
   state = {
    name:''
  }
  getChildInfo = (name)=>{
     this.setState({name:name});
   }
  render() {
    return (
      <div>
        <Child toParent={this.getChildInfo.bind(this)} />
      </div>
    )
  }
}

这是最分布的通信情势,父组件只须求将子组件必要的props传给子组件,子组件直接通过this.props来使用。

原理:

import List from './component/list';

<Route path="list/:id" component={List} />

详解react如何在组件中得到路由参数,react开辟教程之React。如上这篇基于react组件之间的参数字传送递(详解)正是小编分享给大家的全体内容了,希望能给大家1个参阅,也指望大家多多协助脚本之家。

通信内容必发88,

依据 props
来传递事件的引用,并经过回调的不贰秘籍来完成的,那样达成不是特意好,但在未曾别的工具的意况下是一种简易的完毕格局。

只顾 path 属性中的 :id 就是该路由的参数( param )。再来看看 List
页面包车型地铁机件。

你可能感兴趣的稿子:

  • 运用React完成轮播效果组件示例代码
  • React组件的二种写法计算
  • React创造组件的二种办法及其差别
  • 详解React中的组件通信难点
  • 详解react如何在组件中得到路由参数,react开辟教程之React。React组件生命周期详解
  • React组件之间的通讯的实例代码
  • React进级学习之组件的解耦之道
  • React怎样利用相对于根目录进行引用组件详解

愈来愈多要提的是怎么着客观的设置子组件的props,要想将子组件设计成三个复用性强的通用组件,供给将可以复用的局地虚幻出来,抽象出来的props有三种变异,一种是简约的变量,另一种是虚幻出来管理某种逻辑函数。

分析:

/list 对应了 list.js

import React from 'react';
class List extends React.Component {
 render () {
 return (
 <div>
 <h3>This is List page.</h3>
 <p>The list page id is 
  <b style={{color: 'red'}}>{this.props.params.id}</b>
 </p>
 </div>
 );
 }
};
export default List;

以Header 组件为例

React中当state产生更动时,组件才会update。在父组件中设定state的初阶值以及管理该state的函数,同时将函数名经过以props属性值的格局传入子组件,子组件通过调用父组件的函数,进而引起state变化,抵达在父组件中展现子组件发生的转换。

在 List 组件中,能够一直通过 this.props.params.id
来访问实际的参数值(这里的id key 就和定义路线的 :id 绝对应),React
Router 将路由的数据都经过
props传递给了页面组件,那样就可以充足有益的造访路由有关的数目了。

必发88 1

以上便是本文的全体内容,希望对大家的就学抱有扶助,也盼望我们多多帮衬脚本之家。

上述正是本文的全体内容,希望对大家的就学抱有支持,也冀望大家多多扶助脚本之家。

//HeaderBar.jsx 子组件

import React, { Component } from 'react';

class Header extends Component {
  constructor() {
    super();
    this.handleClick = (e) => {
      console.log(this)
    }
  }

  renderLeftComponent() {

    let leftDOM = {};
    if (this.props.renderLeftComponent) {
      return this.props.renderLeftComponent();
    }

    if (this.props.showBack) {
      let backFunc = this.props.onBack || this.goBack;
      leftDOM = (<a onClick={backFunc.bind(this)}><i className="icon left-icon icon-left-arrow"></i></a>);
    }
    return leftDOM;
  }


  renderRightComponent() {
    if (this.props.renderRightComponent) {
      return this.props.renderRightComponent();
    }
  }

  goBack() {
    alert("返回上一页")
  }

  render() {
    return (
      <header className="header-bar">
        {this.renderLeftComponent()}
        {this.props.title || '滴滴'}
        {this.renderRightComponent()}
      </header>
    );
  }
}

export default Header;

//父亲组件部分代码App.jsx
import HeaderBar from "./components/Header";

let leftIcon = function () {
 return (
  <a><i className="icon left-icon icon-left-haha"></i>左边按钮</a>
 )
}
class App extends Component {

 render() {
  return (
   <div className="App">
    <HeaderBar title="滴滴打车" renderLeftComponent={leftIcon} />
   </div>
  );
 }
}

你大概感兴趣的篇章:

  • React中嵌套组件与被嵌套组件的通信进度
  • react
    父组件与子组件之间的值传递的不二等秘书诀
  • 浓密通晓React中es陆创造组件this的法子
  • 接纳React达成轮播效果组件示例代码
  • React组件的两种写法总括
  • 详解react怎样在组件中得到路由参数
  • React怎么着选用相对于根目录进行引用组件详解
  • React创设组件的二种办法及其差别
  • React组件重构之嵌套+继承及高阶组件详解

您只怕感兴趣的稿子:

  • React中嵌套组件与被嵌套组件的通信进程
  • react
    父组件与子组件之间的值传递的法子
  • 浓密了解React中es陆开立组件this的主意
  • 运用React达成轮播效果组件示例代码
  • React组件的三种写法计算
  • React
    子组件向父组件传值的格局
  • React怎么样行使相对于根目录举办引用组件详解
  • React成立组件的两种办法及其区别
  • React组件重构之嵌套+传承及高阶组件详解

子父组件通讯

父-子组件通信的花招是通过子组件的props是子组件用父组件的事物,子-父组件通讯,是父组件用子组件的东西,一时领会的二种形式

应用回调函数

父组件通过props传递2个方法给子组件,子组件通过props方法将子组件数据传递给父组件

利用ref

父组件通过refs调用子组件的质量

跨级组件通讯

在React中当2个属性反复使用并且存在与一些个子组件中的时候,那年我们只要由此props一流顶级传递的话能够达成多层级访问,可是这么出现3个标题正是会使代码特别混乱,在React中夏族民共和国年,大家还足以选择context 来兑现跨级老爹和儿子组件间的通讯;

在react中context称为虫洞

// Component 父级
class parentComponent extends React.Component {

  // add the following property
  static childContextTypes = {
    color: React.PropTypes.string
  }

  // 添加下面方法
  getChildContext() {
    return {
      color: "#f00"
    }
  }

  render() {
    <div>
      <Child1 />
    </div>
  }
}


// Component Child1
class Child1 extends React.Component {
  // 添加下面属性
  static contextTypes = {
    color: React.PropTypes.string
  }

  render() {
    <div>{this.context.color}</div>
  }
}

同级组件通讯

同级组件之间的通讯依旧必要通过父组件作为中介,利用频仍父-子组件通信,项目上校必要传递的数码放在了父组件的state中,变动时能够自动的2只传递。

如上就是本文的全体内容,希望对大家的就学抱有协助,也期望大家多多帮忙脚本之家。

您恐怕感兴趣的小说:

  • 有关react中组件通讯的两种艺术详解
  • 详解React
    native全局变量的施用(跨组件的通讯)
  • 详解React中的组件通信难点
  • React组件之间的通讯的实例代码
  • React数据传递之组件内部通讯的方法

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图