Reactjs 反应-在配置文件之间切换时，将显示上一个配置文件的渲染条件

我创建React应用程序，在其中我要显示多个配置文件。
在配置文件页面上，我想使用选项卡显示有关配置文件的信息：例如，名称和编号。
为了在配置文件之间切换，我添加了prev和next按钮

我有以下问题： 如果我将配置文件选项卡从“名称”切换到“编号”，然后再切换到下一个配置文件，我会看到下一个配置文件中已激活的“编号”选项卡。但是我希望看到默认“Name”的配置文件的状态

同样的问题，如果我在profile选项卡中对信息进行排序，然后转到下一个profile，那么我已经得到了下一个profile的排序信息

我不明白我错在哪里，非常感谢你的帮助

//my profiles.json
让profiles=[{“name”：“John”，“count”：2}，{“name”：“Kitty”，“count”：3}，{“name”：“Ji”，“count”：4}]
const ProfileName=（道具）=>(
{props.name}
)
const ProfileCount=（道具）=>(
{props.count}
)
const Prev=（道具）=>(
上
)
const Next=（道具）=>(
下一个
)
类选项卡扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）
}
把手点击（e）{
e、 预防默认值（）
this.props.onClick（this.props.tabIndex）
}
render（）{
返回(

{this.props.linkClassName}

)
}
}
类选项卡扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）
此.state={
activeTabIndex:0
}
this.handleTabClick=this.handleTabClick.bind（this）
}
handleTabClick（tabIndex）{
这是我的国家({
activeTabIndex:tabIndex==this.state.activeTabIndex？
this.props.defaultActiveTabIndex:tabIndex
})
}
renderChild（）{
返回React.Children.map（this.props.Children，（child，index）=>{
返回React.cloneElement（子级{
onClick:this.handleTabClick，
tabIndex:index，
isActive:index==this.state.activeTabIndex
})
})
}
renderContent（）{
const{children}=this.props
const{activeTabIndex}=this.state
if（子项[activeTabIndex]）{
返回子项[activeTabIndex].props.children
}
}
render（）{
返回(

{this.renderChild（）}

{this.renderContent（）}
)
}
}
Tabs.defaultProps={
defaultActiveTabIndex:null
}
类Main扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
索引：1，
disabledNext:false，
disabledPrev:错误
}
}
切换Prev（e）{
设index=this.state.index-1；
设disabledPrev=（index==0）；
this.setState（{index:index，disabledPrev:disabledPrev，disabledNext:false}）
}
下一页（e）{
设index=this.state.index+1；
让disabledNext=index==（this.props.profiles.length-1）；
this.setState（{index:index，disabledNext:disabledNext，disabledPrev:false}）
}
render（）{
const{index，disabledNext，disabledPrev}=this.state
const profile=this.props.profiles？this.props.profiles[索引]：空
如果（配置文件）{
返回(
this.togglePrev（e）}active={disabledPrev}/>
this.toggleNext（e）}active={disabledNext}/>
)
}否则{
返回错误
}
}
}
常量应用=（）=>(
)
ReactDOM.render(
,
document.getElementById（'root'））
)

ul{
利润率：10px0；
填充：0px；
列表样式：无；
背景#6161a7；
}
li.tab{显示：内联块}
a{
颜色：白色；
宽度：60px；
高度：30px；
线高：30px；
显示：块；
文本对齐：居中；
}
a、 活动{背景：#9696}
.tabcontent{
填充：20px；
边框：1px实心；
}

---

在主组件中，您有“defaultActiveTabIndex”属性，但您永远不会将其传播到子（选项卡）组件

如果将其传播到选项卡组件：

主要组成部分：

    render() {
    const {
      index,
      disabledNext,
      disabledPrev,
      defaultActiveTabIndex
    } = this.state;
    const profile = this.props.profiles ? this.props.profiles[index] : null;

    if (profile) {
      return (
        <div className="profile">
          <Prev toggle={e => this.togglePrev(e)} active={disabledPrev} />
          <Next toggle={e => this.toggleNext(e)} active={disabledNext} />
          <Tabs defaultActiveTabIndex={defaultActiveTabIndex}>
            <Tab linkClassName={"Name"}>
              <ProfileName {...profile} />
            </Tab>
            <Tab linkClassName={"Number"}>
              <ProfileCount {...profile} />
            </Tab>
          </Tabs>
        </div>
      );
    } else {
      return <span>error</span>;
    }
}

 componentWillReceiveProps(props) {
    const { defaultActiveTabIndex } = props;
    if (defaultActiveTabIndex !== this.state.activeTabIndex) {
      this.setState({ activeTabIndex: defaultActiveTabIndex });
    }
  }

  togglePrev(e) {
    let index = this.state.index - 1;
    let disabledPrev = index === 0;

    this.setState({
      index: index,
      disabledPrev: disabledPrev,
      defaultActiveTabIndex: 0,
      disabledNext: false
    });
  }

  toggleNext(e) {
    let index = this.state.index + 1;
    let disabledNext = index === this.props.profiles.length - 1;

    this.setState({
      index: index,
      disabledNext: disabledNext,
      defaultActiveTabIndex: 0,
      disabledPrev: false
    });
  }

我还在prev&next切换方法（MainComponent内部）中添加了defaultActiveTabIndex更改：

在你的情况下，这不是不可避免的，但我已经把它放在那里了，所以你知道你可以在那里更改它-以防你想在上一次/下一次按下时显示不同的“默认”活动选项卡

完整（工作）代码示例如下：

---

希望这有帮助

在主组件中有“defaultActiveTabIndex”属性，但决不会将其传播到子（选项卡）组件

如果将其传播到选项卡组件：

主要组成部分：

    render() {
    const {
      index,
      disabledNext,
      disabledPrev,
      defaultActiveTabIndex
    } = this.state;
    const profile = this.props.profiles ? this.props.profiles[index] : null;

    if (profile) {
      return (
        <div className="profile">
          <Prev toggle={e => this.togglePrev(e)} active={disabledPrev} />
          <Next toggle={e => this.toggleNext(e)} active={disabledNext} />
          <Tabs defaultActiveTabIndex={defaultActiveTabIndex}>
            <Tab linkClassName={"Name"}>
              <ProfileName {...profile} />
            </Tab>
            <Tab linkClassName={"Number"}>
              <ProfileCount {...profile} />
            </Tab>
          </Tabs>
        </div>
      );
    } else {
      return <span>error</span>;
    }
}

 componentWillReceiveProps(props) {
    const { defaultActiveTabIndex } = props;
    if (defaultActiveTabIndex !== this.state.activeTabIndex) {
      this.setState({ activeTabIndex: defaultActiveTabIndex });
    }
  }

  togglePrev(e) {
    let index = this.state.index - 1;
    let disabledPrev = index === 0;

    this.setState({
      index: index,
      disabledPrev: disabledPrev,
      defaultActiveTabIndex: 0,
      disabledNext: false
    });
  }

  toggleNext(e) {
    let index = this.state.index + 1;
    let disabledNext = index === this.props.profiles.length - 1;

    this.setState({
      index: index,
      disabledNext: disabledNext,
      defaultActiveTabIndex: 0,
      disabledPrev: false
    });
  }

我还在prev&next切换方法（MainComponent内部）中添加了defaultActiveTabIndex更改：

在你的情况下，这不是不可避免的，但我已经把它放在那里了，所以你知道你可以在那里更改它-以防你想在上一次/下一次按下时显示不同的“默认”活动选项卡

完整（工作）代码示例如下：

---

希望这有帮助

这对我来说很好，我想你不清楚你在问什么。例如，如果你在配置文件“Kitty”中选择选项卡“Number”，然后单击按钮“next”，你会看到数字“3”，但我想看到配置文件的名称作为默认状态，或者如果你为配置文件“Kitty”排序数据，然后单击按钮“next”，您还可以看到下一个配置文件的已排序数据，而不是配置文件名称和未排序的数据作为默认状态。这对我来说很好，我想不清楚您的要求。例如，如果您在配置文件“Kitty”中选择选项卡“Number”，然后单击按钮“next”，您将看到数字“3”，但我希望将配置文件的名称视为默认状态，或者如果您对配置文件“Kitty”的数据进行排序，然后单击按钮“next”，您还将看到下一个配置文件的排序数据，而不是配置文件的名称和未排序为默认状态的数据