react 组件之间传递数据

react 组件之间传递数据

(1)一个组件如何向另一个组件传递参数呢?

StoreListPage 向StoreList传递参数:

<StoreList data={this.listStore.data}/>

 StoreList中是如何接收参数的呢?

在render 方法中

let {data} =  this.props;

 

StoreListPage.js中

renderContent() {
		return (
			 <div>
                	<StoreSlider />
                	<StoreList data2={this.listStore.data}/>
             </div>
		)
	}

 StoreList中

render() {
		let {data2} =  this.props;
		const items = data2.map((item,index) => {
            return (<StoreListItem key={item.name} item={item} onTelPhone={this.onTelePhone} />);
        });

		return (
			<div className="app-list">
				{items}
			</div>
		);
	}

组件间传递参数的桥梁就是:this.props 

类似安卓中activity 传递参数的桥梁是android.content.Intent  一样.

 

(2)路由之间如何传递参数

在路由后面加上"?username=黄威"? 不是

路由是通过navigationController实现的

this.context.navigationController.push('/detail', {productId: this.id});

 在目标 路由中获取参数:

const {params} = this.props;
        console.log('params.id');
        console.log(params.productId);

 

(3)事件方法中如何传递参数

比如onclick事件中如何传递参数呢?

 <div className="app-list-infor" onClick={() => this.goDetail(event,{id})}>

 

注意:事件名称不是onclick,而是onClick(驼峰标识)

 

 参考:

https://facebook.github.io/react/docs/dom-differences.html