ReactJS - 孩子如何访问父母的道具？

Question

孩子如何进入父母的道具？例如，

的父组件 - 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 } 

一个子组件 - NAV-item.jsx：

进口从阵营 '反应';

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 } 

结果footer.jsx（父）：

this.props.publicUrl // http://my-website.com 

结果nav-item.jsx（子）：

this.props.publicUrl // undefined but it should be http://my-website.com 

任何想法？

的样本数据：

{ 
    "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 
    }] 
} 

Answer 1

我必须绑定this到循环：

var loop = this.state.navitems.map(function(item, index){ 
      return <NavItem key={index} publicUrl={this.state.publicUrl} item={item}></NavItem>; 
}.bind(this)); 

Answer 2

入住这里

http://jsfiddle.net/z5m56sqn/

也可以使用this.handleChildClick.bind(null,childIndex) and then use this.state.childrenData[childIndex]

注意我们正在与一个空的上下文结合，否则阵营发出警告与其自动绑定系统相关。使用null意味着你不想改变函数上下文。也可以看看。

Answer 3

您必须将该值作为prop从父项传递给子项。否则不可能。

所有你必须在你的代码来完成上面这个小修改：

var loop = this.state.navitems.map(function(item, index){ 
    return <NavItem key={index} publicUrl={this.props.publicUrl} item={item}></NavItem>; 
}); 

现在，NavItem将有道具publicUrl这等于publicUrl道具父。所以基本上：

结果footer.jsx（父）：

this.props.publicUrl // http://my-website.com 

导致NAV-item.jsx（子）：

this.props.publicUrl // http://my-website.com 

---

另外，虽然不推荐在你的情况下，你可以通过NavItem作为道具的一个函数。该函数可以在您的父项中定义，并返回prop（或state或该组件的任何本地内容）的值。

因此，例如，在你的父母：

_getPublicUrl =() => { 
    return this.props.publicUrl; //or any kind of value, local or otherwise 
} 
...... 
var loop = this.state.navitems.map(function(item, index){ 
    return <NavItem key={index} getPublicUrl={this._getPublicUrl} item={item}></NavItem>; 
}); 

然后，在你NavItem，你可以调用这个函数：

var parentPublicUrl = this.props.getPublicUrl(); 

同样，在此特定情况下建议。但是，这是获取state值或通过某些Ajax调用或某事获取的变量的有用方法。

Answer 4

无法访问子组件中的父项道具。通过这样的道具

1. 值传递到从父子成分： - - ：您可以在以下两种方式实现这一 <NavItem key={index} publicUrl={this.state.publicUrl} item={item}></NavItem>。
2. 从状态设置状态值和调度行为以从状态获取值。

另外，我注意到你在componentDidMount设定状态值，所以国家在构造函数或任何设置的默认值在你的孩子组件检查未定义值