react组件间的传值方法

关于react的几个网站： 

http://react.css88.com/

小书：http://huziketang.mangojuice.top/books/react/

http://www.redux.org.cn/

组件传值的方法：

1.父子组件间的传值

2.context

3.子组件向父组件传值

4.没有任何嵌套关系的组件之间传值

5.redux 

一、父子组件间的传值（主要是利用 props 来进行交流，父组件用this.state传值，子组件用this.prop）：

如果组件嵌套层次太深，那么从外到内组件的交流成本就变得很高，通过 props 传递值的优势就不那么明显了。

Father.jsx文件

import React, { Component} from 'react'

import Son from './Son.jsx'

{/*引入子组件*/}

export default class Father extends Component{

constructor(){

super();

this. state = {

message: 'hello',

sonVal: null

}

}

render(){

return (

< div id= "father" >

< h1 >Father组件 </ h1 >

< button onClick= {() =>{ this. setState({ message: 'world'})} } >

修改

</ button >

{ /* <Son data="test data value"/> */ }

< p >选择了那种水果： {this. state. sonVal } </ p >

< Son data= {this. state. message } handle= {this. testAction. bind( this) } />

{/*子组件中传递参数或者方法*/} 

</ div >

)

}

// 接收子组件数据

testAction( value){

console. log( this);

console. log( value);

this. setState({ sonVal: value});

} }

Son.jsx

import React, { Component} from 'react'

export default class Son extends Component{

constructor(){

super();

this. state = {

select: '苹果'

}

}

render(){

let arr = [ '苹果', '香蕉', '西瓜'];

return (

< div id= "son" >

< h1 >Son组件 </ h1 >

< p >接收到的值为： {this. props. data } </ p >

{

arr. map(( item, index) =>{

return (

< p key= { index } >

{ item }:

< input type= "radio" value= { item }

checked= {this. state. select == item }

onChange= {this. inputChange. bind( this) } />

</ p >

)

})

}

</ div >

)

}

inputChange( ev){

let value = ev. target. value;

this. setState({ select: value});

// 调用父组件的方法，将值传递给父组件

this. props. handle( value);

}

}

 

 二.（父组件）向更深层的（子组件） 进行传递信息  >>利用（context） 

通过添加 childContextTypes 和 getChildContext() 到 第一层组件MessageList （ context 的提供者），React 自动向下传递数据然后在组件中的任意组件（也就是说任意子组件，在此示例代码中也就是 Button ）都能通过定义 contextTypes（必须指定context的数据类型） 访问 context 中的数据。这样就不需要通过第二层组件进行传递了。

指定数据并要将数据传递下去的父组件要定义 childContextTypes 和 getChildContext() ；想要接收到数据的子组件 必须定义 contextTypes 来使用传递过来的 context 。

var Button = React. createClass({

// 必须指定context的数据类型

contextTypes: {

color: React. PropTypes. string

},

render : function() {

return (

< button style= {{ background: this. context. color} } >

{this. props. children }

</ button >

);

}

});

 

var Message = React. createClass({

render : function() {

return (

< div >

{this. props. text } < Button >Delete </ Button >

</ div >

);

}

});

 

var MessageList = React. createClass({

//父组件要定义 childContextTypes 和 getChildContext()

childContextTypes: {

color: React. PropTypes. string

},

getChildContext : function() {

return { color: "purple"};

},

render : function() {

var children = this. props. messages. map( function( message) {

return < Message text= { message. text } />;

});

return < div > { children } </ div >;

}

});

 

三、子组件向父组件传值

【子组件】控制自己的 state 然后告诉【父组件】的点击状态，然后在【父组件】中展示出来

// 父组件

var MyContainer = React. createClass({

getInitialState : function () {

return {

checked: false

};

},

onChildChanged : function ( newState) {

this. setState({

checked: newState

});

},

render : function() {

var isChecked = this. state. checked ? 'yes' : 'no';

return (

< div >

< div >Are you checked: { isChecked } </ div >

< ToggleButton text= "Toggle me"

initialChecked= {this. state. checked }

callbackParent= {this. onChildChanged }

/>

</ div >

);

}

});

 

// 子组件

var ToggleButton = React. createClass({

getInitialState : function () {

return {

checked: this. props. initialChecked

};

},

onTextChange : function () {

var newState = ! this. state. checked;

this. setState({

checked: newState

});

// 这里要注意：setState 是一个异步方法，所以需要操作缓存的当前值

this. props. callbackParent( newState);

},

render : function () {

// 从【父组件】获取的值

var text = this. props. text;

// 组件自身的状态数据

var checked = this. state. checked;

 

return (

< label > { text }: < input type= "checkbox" checked= { checked } onChange= {this. onTextChange } /></ label >

);

}

});

四、没有任何嵌套关系的组件之间传值（比如：兄弟组件之间传值）

推荐一个相关博客：https://blog.csdn.net/u011439689/article/details/51955991 

ProductSelection和Product本身是没有嵌套关系的，而是兄弟层级的关系。但通过在ProductSelection组件中订阅一个消息，在Product组件中又发布了这个消息，使得两个组件又产生了联系，进行传递的信息。所以根据我个人的理解，当两个组件没有嵌套关系的时候，也要通过全局的一些事件等，让他们联系到一起，进而达到传递信息的目的。

 One.jsx文件

import React, { Component} from 'react'

import PubSub from 'pubsub-js'

export default class One extends Component{

constructor(){

super();

console. log( 'constructor');

this. state = {

message: null

}

}

render(){

console. log( 'render');

return (

< div >

< h1 >One组件 </ h1 >

< p >接收到的值为： {this. state. message } </ p >

</ div >

)

}

// 创建并且渲染完成的方法

componentDidMount(){

console. log( 'componentDidMount');

//监听子组件的事件

this. token = PubSub. subscribe( 'send-data', ( eventName, data) =>{

console. log( 'subscribe执行了');

console. log( data);

this. setState({ message: data});

})

// $on

}

//组件将要销毁

componentWillUnmount(){

console. log( 'componentWillUnmount');

// 组件销毁时，需要移除监听

PubSub. unsubscribe( this. token);

// $off

}

}

Two.jxs

import React, { Component} from 'react'

import PubSub from 'pubsub-js'

export default class Two extends Component{

render(){

return (

< div >

< h1 >Two组件 </ h1 >

< input type= "text" ref= "in" />

< button onClick= {this. sendAction. bind( this) } >发送 </ button >

</ div >

)

}

sendAction(){

// 发送信息给one组件

PubSub. publish( 'send-data', this. refs. in. value);

// $emit

}

}

五.利用react-redux进行组件之间的状态信息共享

如果是比较大型的项目，可以使用react-redux，这方面的资料可以参考阮一峰的网络日志。

http://github.com/mroderick/PubSubJS

地址： http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html

 

转载于:https://www.cnblogs.com/yunshangwuyou/p/9480441.html