react 父子传值_react 父子组件传值——父传子

有兴趣的小伙伴可以加Q群 879108483 互相学习

1.使用props传值

具体实现

import React, { Component } from 'react';

/**父组件 */

export default class Parent extends Component {

state = {

msg: 1

}

render() {

return (

this.setState({ msg: this.state.msg + 1 })} >

{/* 子组件 */}

);

}

}

/**子组件 */

class Child extends Component {

// 默认的props 可写可不写

static defaultProps = {

msg: 1

}

render() {

return (

{/* 通过props传递过来的参数 */}

{this.props.msg}

)

}

}

2.使用context (上下文)

Context被归类为高级部分(Advanced)，属于React的高级API，但官方并不建议在稳定版的App中使用Context。实际上很多优秀的组件都是通过context来实现的，比如antd的主题样式。用好context可以使项目更灵活。

Context 不仅仅适用于父传子，还可以用来作为跨级传递数据，比如父组件传孙子组件。如果要使用props达到这个效果就要层层传递props。 下面看看context实现方式

简单使用 (老方法)

import React, { Component } from 'react';

import PropTypes from 'prop-types';

/**父组件 */

export default class Parent extends Component {

state = {

msg: 0

}

// 声明Context属性

static childContextTypes = {

// 数字类型

msg: PropTypes.number,

// 方法

method: PropTypes.func

}

// 返回Context对象，约定好方法

getChildContext() {

return {

msg: this.state.msg,

method: () => "返回来的信息"

}

}

render() {

return (

this.setState({ msg: this.state.msg + 1 })} >

{/* 子组件 */}

{/* 无状态子组件 */}

);

}

}

/**子组件 */

class Child extends Component {

// 声明需要使用的Context属性 必写 不然听过this.context.xxx 取出来的值为undefind

static contextTypes = {

msg: PropTypes.number

}

render() {

return (

{/* 通过props传递过来的参数 */}

{this.context.msg}

{/* 孙子组件 */}

)

}

}

/**无状态组件 */

const ChildStateLess = (props, context) => {

return (

{context.msg}

)

}

/**为无状态组件声明需要使用的Context属性 */

ChildStateLess.contextTypes = {

msg: PropTypes.number

}

/**孙子组件 */

class GrandsonComponent extends Component {

// 声明需要使用的Context属性 必写 不然听过this.context.xxx 取出来的值为undefind

static contextTypes = {

msg: PropTypes.number

}

render() {

return (

{/* 通过props传递过来的参数 */}

{this.context.msg}

)

}

}

使用 Api创建

import React from 'react';

const ExampleContext = React.createContext({

msg: 0,

method: () => "method"

});

此ExampleContext通过React.createContext创建，这个Context对象包含两个组件，和。

两个API代替了getChildContext、childContextTypes、contextTypes这些繁琐的api，更符合react的设计理念。

import React, { Component } from 'react';

import PropTypes from 'prop-types';

const ExampleContext = React.createContext('ExampleContext');

class ExampleProvider extends Component {

state = {

msg: 0

}

render() {

return (

{

this.setState({ msg: this.state.msg + 1 })

}} >

{ } }} >

);

}

}

/**子组件 */

class Child extends Component {

render() {

return (

{

(context) => (

{/* 通过props传递过来的参数 */}

{context.msg}

{/* 孙子组件 */}

)

}

)

}

}

/**无状态组件 */

const ChildStateLess = (props, context) => {

return (

{

(context) => (

{/* 通过props传递过来的参数 */}

{context.msg}

{/* 孙子组件 */}

)

}

)

}

/**为无状态组件声明需要使用的Context属性 */

ChildStateLess.contextTypes = {

msg: PropTypes.number

}

/**孙子组件 */

class GrandsonComponent extends Component {

render() {

return (

{

(context) => (

{/* 通过props传递过来的参数 */}

{context.msg}

{/* 孙子组件 */}

)

}

)

}

}

export default ExampleProvider;

直接使用context的地方

生命周期：

1.componentWillReceiveProps(nextProps, nextContext)

2.shouldComponentUpdate(nextProps, nextState, nextContext)

3.componetWillUpdate(nextProps, nextState, nextContext)

构造函数: constructor(props, context)

web前端、react交流群：879108483