Javascript 根据条件调用另一个组件中的函数，无论该选项卡是否处于活动状态

例1：

点击tab1。选项卡1是活动选项卡。再次单击tab1（tab1是活动选项卡），我不想调用组件“详细信息”中的函数start（）。单击选项卡2或选项卡3，我想调用另一个组件“详细信息”中的函数start（）

例2：

单击

选项卡2

。选项卡2是活动选项卡。再次单击tab2（tab2是活动的tab），我不想调用组件“详细信息”中的函数start（）。单击选项卡1或选项卡3，我想调用另一个组件“详细信息”中的函数

start（）

尝试在“详细信息”组件中创建条件。如果选项卡未激活，请调用

start（）

函数。将函数

isActive（）

和变量

selectedTabId

从组件“Tabs”移动到“Details”，如果该选项卡未激活，则在那里调用启动函数。我的推理正确吗？这是一个好方法吗

代码如下：

图纸：

选项卡

var Tabs = React.createClass({
  getInitialState: function() {
    return { selectedTabId: 1 }
  },

  isActive: function (id) {
    return this.state.selectedTabId === id;
  },

  setActiveTab: function (selectedTabId) {
      this.setState({ selectedTabId });
  },

  render: function() {
    var total = this.props.data.points.total,
        tabs = total.map(function (el, i) {
          return <Tab 
            key={ i }
            content={ el.name } 
            id={el.id}
            isActive={ this.isActive(el.id) } 
            onActiveTab={ this.setActiveTab.bind(this, el.id) }
          />
        }, this);

    return 
    <div>
      <ul className="navigation">
       { tabs }
      </ul>
      <Details 
        isActive={ this.isActive}
        selectedTabId={this.state.selectedTabId}
      />
    </div>
  }
});

var Details = React.createClass({

  componentDidMount() {
     if(!this.props.isActive(this.props.selectedTabId)){
      this.start();
    }
  },

  start: function() {
    return console.log('aaa')
  },

  render: function() {
    return 

      <p></p>

  }
});

var Tabs=React.createClass({
getInitialState:函数（）{
返回{selectedTabId:1}
},
isActive:函数（id）{
返回this.state.selectedTabId==id；
},
setActiveTab:函数（SelectedTab）{
this.setState（{selectedTabId}）；
},
render:function（）{
var total=this.props.data.points.total，
tabs=总计.map（函数（el，i）{
返回
}，这个）；
返回

{tabs}

}
});

详细信息

var Tabs = React.createClass({
  getInitialState: function() {
    return { selectedTabId: 1 }
  },

  isActive: function (id) {
    return this.state.selectedTabId === id;
  },

  setActiveTab: function (selectedTabId) {
      this.setState({ selectedTabId });
  },

  render: function() {
    var total = this.props.data.points.total,
        tabs = total.map(function (el, i) {
          return <Tab 
            key={ i }
            content={ el.name } 
            id={el.id}
            isActive={ this.isActive(el.id) } 
            onActiveTab={ this.setActiveTab.bind(this, el.id) }
          />
        }, this);

    return 
    <div>
      <ul className="navigation">
       { tabs }
      </ul>
      <Details 
        isActive={ this.isActive}
        selectedTabId={this.state.selectedTabId}
      />
    </div>
  }
});

var Details = React.createClass({

  componentDidMount() {
     if(!this.props.isActive(this.props.selectedTabId)){
      this.start();
    }
  },

  start: function() {
    return console.log('aaa')
  },

  render: function() {
    return 

      <p></p>

  }
});

var Details=React.createClass({
componentDidMount（）{
如果（！this.props.isActive（this.props.selectedTabId））{
这个。start（）；
}
},
开始：函数（）{
返回console.log（'aaa'）
},
render:function（）{
返回

}
});

目前的问题是，在呈现

选项卡时会呈现
详细信息
，因此只有在第一次呈现时才会调用
开始
。另外，
详细信息
无法知道状态何时更改

一种解决方案是将
start
移动到
Tabs
中，并在需要时调用
setActiveTab
，如下所示。这允许我们将
详细信息
组件一起删除：

var Tabs = React.createClass({
  ...
  setActiveTab: function (selectedTabId) {
      if(selectedTabId !== 
      this.setState({ selectedTabId });
  },
  start: function () {
      console.log('aaa')
  },

  ...
})


更新的代码笔：

我已经有一段时间没有使用react类了，但是如果您可以访问react 16.8并希望将状态处理逻辑与呈现分离（这似乎是
详细信息
组件的目的），那么您可以使用react钩子（对于类，您可以使用
ref
s）

示例代码笔：
而不是
componentDidMount
您需要在
Details
组件中使用
componentdiddupdate
-