this.props在Method中未定义

Question

问题：当我尝试将面板传递到我的createTabs（）内创建标签时，在createTabs（）中，道具this.props为undefined 。当我在const tabs = this.createTabs(panels);行的面板上设置断点时，panels有一个值，所以我知道这很好。

我还想要反馈我尝试初始化标签（该调用）的位置是正确的生命周期方法。

这是一个截屏视频，可帮助您了解问题https://www.youtube.com/watch?v=Z04LV8LHCvI

import React, { Component, PropTypes } from 'react';
...

export default class Tabs extends Component {
  constructor() {
    super();
    ....

    };

    this.state = {
      ...
      tabs: null,
    };

    this.createTabs = this.createTabs.bind(this);
    ...
  }

  componentWillMount() {
    const { panels } = this.props;
    const panel = _.get(panels, 'member.0');

    if (panel) {
      this.tabChanged(0, _.get(panel, 'headline'));
      const filters = shapeFilters(_.get(panel, 'customViews'), this.setSelectedFilter);
      this.setState({ selectedFilter: (filters && filters.length > 0) ? filters[0] : null });
    }

    const tabs = this.createTabs(panels);
    this.setState({ tabs });
  }

  componentWillUpdate(nextProps, nextState) {
    const { selectedTab: currentTab, panels: currentPanels } = this.props;
    ....

    if (currentTab === nextTab) return null;

    const { panels } = this.props;
    const filter = { selectedFilter: null };
    const nextFilterName = _.get(nextFilter, 'name', null);

    if (panels && nextFilter) {
      ...
    }
    ...
    this.setState({ filter });
  }


  createTabs() {
    // this.props is undefined, why?????
    const tabs = this.props.panels.member.map((panel, idx) => {
      const { selectedTab } = this.props;
      const { id: panelId, headline } = panel;
      const url = getHeaderLogo(panel, 50);
      const item = url ? <img src={url} alt={headline} /> : headline;

      const classname = classNames([
        searchResultsTheme.tabItem,
        (idx === selectedTab) ? searchResultsTheme.active : null,
      ]);

      this.setFilter(panel, idx, selectedTab);

      return (
        <TabItem
          key={panelId}
          classname={`${classname} search-tab`}
          headline={headline}
          idx={idx}
          content={item}
          onclick={this.tabChanged}
        />
      );
    });

    return tabs;
  }


  render() {
    return (
      <div className={searchResultsTheme.filters}>
        <ul className={`${searchResultsTheme.tabs} search-tabs`}>{this.state.tabs}</ul>
      </div>
    );
  }
}

SearchTabs.defaultProps = {
  panels: {},
  ...
};

SearchTabs.propTypes = {
  panels: PropTypes.shape({}).isRequired,
.....
};

export const TabItem = ({ classname, content, onclick, key }) => (
  <li key={key} className={`${classname} tab-item`} onClick={onclick} >{content}</li>
);

Answer 1

除非你明确地将它们传递给构造函数和调用super，否则道具将无法在你的类中使用。

constructor(props) {
    super(props);
    ....

    };

    this.state = {
      ...
      tabs: null,
    };

    this.createTabs = this.createTabs.bind(this);
    ...
  }