Reactjs如何将当前页面的道具传递到子页面中
Reactjs How to pass the props of current page into child page
这是Clients_info.js
在这个组件的道具中,它有几个值。
现在我想把这个组件中的所有props
传递给Modalbox
组件。
我知道如何将当前state
的值作为props
传递给渲染函数中的子组件。但是从props
到props
。。。
我怎么能做到呢?谢谢
import React from "react";
import Modalbox from './Client_modal'
require('../../css/Clients.scss');
var $ = require ('jquery');
export default class Clients_info extends React.Component {
constructor(props) {
super(props);
}
//Invoked once, both on the client and server, immediately before the initial rendering occurs.
componentWillMount(){
}
render() {
return(
<div id='tabbox-order' className='clients_info'>
<div id='clientsInfo_wrapper'>
<div id='clientsInfo_row'>
<div id='ava_wrapper'>
<img id='clietnsInfo_avatar'></img>
<p>{this.props.client.name}</p>
</div>
<div id='infor_wrapper'>
<p><i class="material-icons">email</i> Email: {this.props.client.email}</p>
<p><i class="material-icons">phone</i> Phone: {this.props.client.phone}</p>
<p><i class="material-icons">location_on</i> Address: {this.props.client.loc}</p>
<p><i class="material-icons">my_location</i> Zip Code: {this.props.client.zip}</p>
</div>
</div>
<div id='key' >
<i class="material-icons">vpn_key</i>{this.props.client.key}
</div>
<div id='Cutting' ></div>
<div>
<h4>Pets Information</h4>
{ this.props.pets.map(function(pet) {
return(
<div>
<div className='row'key={pet.id}>
<div className='col-md-3' >avatar</div>
<div className='col-md-3' >{pet.petName}</div>
<div className='col-md-3' >{pet.breed}</div>
<div className='col-md-3' >{pet.age}</div>
</div>
<div id='pet-detail'>
<p>Extra Information:</p>
<input placeholder='This dog is crazy!!!'>
</input>
</div>
</div>
)
})
}
</div>
<div id='Cutting' ></div>
<Modalbox/>
</div>
</div>
);
}
}
<Modalbox pets={ this.props.pets }/>
应该做的工作
相关文章:
- 获取当前页面的URL并将其附加到Facebook共享链接(使用javascript)
- 如何在 safari 中获取当前页面的 url 和标题
- Chrome扩展程序将外部JavaScript添加到当前页面的html中
- 在服务器更改时自动更新/重新加载当前页面的库
- 检测具有 href 属性的“A”标记,该属性等于当前页面的 URL
- 如何定义相对于当前页面的 URL w jQuery
- 我想通过javascript生成当前页面的url,并添加两个参数
- 从当前页面的URL中删除哈希
- 如何在手风琴导航菜单中设置当前页面子链接及其父链接的样式
- Javascript获取当前页面的html
- 如何在文本输入中显示当前页面的url,供用户复制
- 如何使用Jquery和Javascript在当前页面的Div中显示错误消息
- jQuery:添加Class Active到<与当前页href
- 如何将当前页内容追加到另一页
- 解析当前页面的html
- 使用javascript在重载时更改当前页面的URL
- 如何在不刷新页面的情况下将当前页面的url发送给servlet
- 如何提交表单并在当前页面的Div中加载目标页面
- 如何在Firefox插件中获取当前页面的SSL证书信息?
- Ng-table, ng-repeat,过滤器只对分页表中的当前页起作用