react父子传值

167 阅读1分钟

react + ant design 在博客页面点击收藏数字跳转到收藏tab

在父组件中tabKey由state控制,初始值是articles, 给Articles组件传onTabsChange事件

<Card
    className={styles.tabsCard}
    bordered={false}
    tabList={operationTabList}
    activeTabKey={tabKey}
    onTabChange={this.onTabChange}
>
 <Articles
    onChange={this.handleArticlesChange}
    onTabsChange={this.handleTabsChange}    
/>
  handleTabsChange = tabKey => {
    this.setState({ tabKey });
  }

在子组件中给收藏数字添加toCollection点击事件,接收父组件的onTabsChange

<span onClick={() => this.toCollection()}>{item.star + 1}</span>
  toCollection = () => {
    this.props.onTabsChange('collection');
  };