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：

インポート 'が反応する' と反応させ; footer.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 } 

結果：nav-item.jsxで

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

結果（子）：

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という値を親から子に渡す必要があります。そうでなければ実際には可能ではありません。

あなたは上記のコード内にしなければならないのは、この小さな修正されています。今、NavItemは親のpublicUrl小道具に等しい小道具publicUrlを持つことになります

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

。だから、基本的には：footer.jsxで

結果（親）：NAV-item.jsxで

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

結果（子）：

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

子コンポーネントの親小道具にアクセスする方法はありません。次の2つの方法を以下にこれを達成することができます -

1. 親から子コンポーネントへのパスの値は、このような小道具を経て： - <NavItem key={index} publicUrl={this.state.publicUrl} item={item}></NavItem>。
2. 状態から値を取得するために、状態およびディスパッチアクションの値を子から設定します。

はまた、私はあなたがcomponentDidMount状態での値を設定されていることがわかり、その設定されたデフォルトのコンストラクタでの状態の値ORのどちらかを