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 } 

Ребенок компонент - СЧ 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 

приводит нав-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, поэтому либо устанавливают значения по умолчанию для состояния в конструкторе или проверить наличие неопределенного значения в вашем ребенке компонентах