なぜ、子コンポーネントは親より多くの小道具を持っていますか？

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); 
    }