170
rated 0 times
[
173]
[
3]
/ answers: 1 / hits: 48997
/ 8 Years ago, fri, november 4, 2016, 12:00:00
How can a child access its parent's props? For instance,
A parent component - footer.jsx:
import React from 'react';
import $ from 'jquery';
import NavItem from './nav-item';
class Footer extends React.Component
{
constructor(props) {
super(props);
this.state = {
publicUrl: null,
currentUrl: null,
navitems: [],
};
}
// Then fetch the data using $.getJSON():
componentDidMount() {
this.serverRequest = $.getJSON(this.props.source, function (result) {
this.setState({
currentUrl: window.location.href,
publicUrl: result.publicUrl,
navitems: result.nav
});
}.bind(this));
}
componentWillUnmount() {
this.serverRequest.abort();
}
render() {
var loop = this.state.navitems.map(function(item, index){
return <NavItem key={index} item={item}></NavItem>;
});
return (
<div>
<div className=nav>
<ul>{ loop }</ul>
<p>{this.state.publicUrl}</p>
<p>{this.state.currentUrl}</p>
</div>
</div>
)
}
}
export { Footer as default }
A child component - nav-item.jsx:
import React from 'react';
class NavItem extends React.Component
{
constructor(props) {
super(props);
}
render() {
return <li><a href={this.props.publicUrl + '/' + this.props.item.url}>{this.props.item.title}</a></li>
}
}
export { NavItem as default }
results in footer.jsx (parent):
this.props.publicUrl // http://my-website.com
results in nav-item.jsx (child):
this.props.publicUrl // undefined but it should be http://my-website.com
Any ideas?
Sample data:
{
publicUrl: http://my-website.com,
nav: [{
navId: 3,
title: Home
code: home
href: null,
style: null,
sort: 3,
url: home
parentId: null,
totalChildren: 0,
createdOn: null,
updatedOn: null
}, {
navId: 4,
title: About
code: about
href: null,
style: null,
sort: 4,
url: about
parentId: null,
totalChildren: 0,
createdOn: null,
updatedOn: null
}, {
navId: 5,
title: Contact,
code: contact,
href: #contact,
style: null,
sort: 5,
url: contact,
parentId: null,
totalChildren: 0,
createdOn: null,
updatedOn: null
}]
}
More From » reactjs
