Почему у дочернего компонента больше реквизита, чем у родителя?

Question

У меня есть родительский компонент, который я хочу быть вкладками для нескольких детей. По какой-то причине у моего дочернего компонента больше данных реквизита, чем у родителя.

Родитель компонент

import React, { Component} from 'react'; 
import { Link } from 'react-router'; 
import { connect } from 'react-redux'; 

class TerritoryTabs extends Component { 

    componentWillMount() { 
    console.log('this is the parent props (tabs)') 
    console.log(this.props); 
    } 

    render() { 
    return (

    {this.props.children} 

    ); 
    } 

} 

export default connect(null, null)(TerritoryTabs); 

Детский компонент

import React, { Component} from 'react'; 
import { Link } from 'react-router'; 
import { connect } from 'react-redux'; 
import { reduxForm } from 'redux-form'; 

import { getTerritoryGeographies } from '../actions/index'; 

import TerritoryTabs from './territory-tabs'; 

class TerritoryGeographyList extends Component { 

    componentWillMount() { 
    console.log('this is child props (TerritoryGeographyList)'); 
    console.log(this.props); 
    this.props.getTerritoryGeographies(this.props.params.id); 
    } 

    render() { 
    return (
    <TerritoryTabs> 

      <div>This list goes here</div> 

    </TerritoryTabs> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { territoryGeographies: state.territoryGeographies.all 
     }; 
} 

export default connect(mapStateToProps, { getTerritoryGeographies })(TerritoryGeographyList); 

Вот что консоль печатает.

Answer 1

Обертка компонент должен быть назван "родителем". Пример:

<Parent> 
    <Child /> 
</Parent> 

Таким образом, в вашем случае, исправить эту строку:

class TerritoryTabs extends Component { 

    componentWillMount() { 
    console.log('this is the child props (tabs)') // <-- Fix this line, it should be the "child" 
    console.log(this.props); 
    } 

и эту линию:

class TerritoryGeographyList extends Component { 

    componentWillMount() { 
    console.log('this is parent props (TerritoryGeographyList)'); // <-- fix this line, it should be "parent" 
    console.log(this.props); 
    this.props.getTerritoryGeographies(this.props.params.id); 
    }