React中多层组件嵌套，最深层组件的props失去状态，不能改变值

Question

我是想通过点击按钮切换按钮的高亮，但是点击第二个的按钮组没反应，点击第一个就有，请各位大佬指教指导一下我这新人

这是主文件的代码

import React from "react";

import CrmContainer from "../../components/crm/crm-container/crm-container";
import CrmHeader from "../../components/crm/crm-header/crm-header";
import CrmMainer from "../../components/crm/crm-mainer/crm-mainer";
// ----------------------------

import CommonHeader from "../../components/common/header/header";
import Tabs from "../../components/common/tabs/tabs";

class PhoneManagement extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      list: [{name: "电话团队设置", id: "phone"}, {name: "电话团队设置", id: "phonesfdafa"}],
      tabName: "phone"
    }
  }

  hanlerTabClick = (item, index) => {

    this.setState({
      tabName: item.id,
    })

  }

  render(){
    return (
      <div className="phone-management">
        <Tabs list={this.state.list} tabName={this.state.tabName} onClick={this.hanlerTabClick} ></Tabs> // 这个按钮组有反应
        <CrmContainer header={
          <CrmHeader height="auto">
            <CommonHeader text="设置"></CommonHeader>
          </CrmHeader>
        } 
        mainer={
          <CrmMainer height="60px">
            <Tabs list={this.state.list} tabName={this.state.tabName} onClick={this.hanlerTabClick} ></Tabs>
          </CrmMainer>
        }>
        </CrmContainer>
      </div>
    )
  }
}

export default PhoneManagement

这是Tab的代码

import React from "react";
import { Button } from 'element-react';

import "./tabs.css";

class Tabs extends React.Component{
  constructor(props){
    super(props);
    this.state = {

    }
  }

  render(){
    return (
      <div className="tabs">
        <div className="tab-container mgr-07">
          
          {this.props.list.map((item, index) => 

            <Button type={ this.props.tabName === item.id? 'primary' : '' } size={ this.props.size } 
              onClick={() => this.props.onClick(item, index)} key={ item.id }>
              {item.name} {this.props.tabName} {this.props.type === 'three' && item.valNum && <span>({item.valNum} )</span>}
            </Button>)
          }
        </div>
      </div>
    )
  }
}

Tabs.defaultProps = {
  tabName: "",
  list: [],
  size: "",
  onClick: (() => {}),
  type: ""
}

export default Tabs

这是container的代码

import React from "react";
import "./crm-container.css";

class CrmContainer extends React.Component{
  constructor(props){
    super(props);
    this.state = {}
  }

  render(){
    return (
      <section className="crm-container" >
        {this.props.header}
        {this.props.mainer}
      </section>
    )
  }
}

export default CrmContainer

这是mainer.js的代码

import React from "react";
import "./crm-mainer.css";

class CrmMainer extends React.Component{
  constructor(props){
    super(props);

    this.state = {
      slotEle: window.utils.formatSlotEle(props),
    }
  }

  render(){
    return (
      <div className="crm-mainer">
        {this.state.slotEle && this.state.slotEle.map((ele) => ele)}
      </div>
    )
  }
}

export default CrmMainer

Answer 1

等待大神解答