为什么子组件比父组件有更多的道具？

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

wrap组件应该被称为“parent”。例如：

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