javascript - 根据条件调用另一个组件中的函数，无论选项卡是否处于事件状态

Question

示例1:

单击选项卡1。选项卡 1 是事件选项卡。再次单击 tab1(tab1 是事件选项卡)我不想在组件“详细信息”中调用函数 start()。单击选项卡 2 或选项卡 3 我想在另一个组件“详细信息”中调用函数 start()。

示例2:

单击tab2。选项卡 2 是事件选项卡。再次单击 tab2(选项卡 2 是事件选项卡)我不想在组件“详细信息”中调用函数 start()。单击选项卡 1 或选项卡 3 我想调用另一个组件“详细信息”中的函数 start()。

尝试在“详细信息”组件中创建条件。如果选项卡未激活，请调用 start () 函数。将函数 isActive () 和变量 selectedTabId 从组件“Tabs”移动到“Details”，如果选项卡未激活，则在此处调用启动函数。我的推理正确吗？这是一个好方法吗？

此处代码:https://codepen.io/kaka-milan/pen/oKXJma?editors=1111

绘图:/image/UuzYl.jpg

标签

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>

  }
});

Answer 1

目前的问题是 Details 在渲染 Tabs 时渲染，因此 start 仅在第一次渲染时调用。此外，Details 无法知道状态何时更改。

一种解决方案是将 start 移至 Tabs 中，并在需要时在 setActiveTab 中调用它，如下所示。这允许我们完全删除 Details 组件:

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

  ...
})

更新的代码笔:https://codepen.io/sentaipadas/pen/JgYPmq

我已经有一段时间没有使用 React 类了，但是如果您可以访问 React 16.8 并且希望将状态处理逻辑与渲染分开(看起来这就是 Details 组件的目标) )您可以使用 React hooks(您可以使用 ref 的类)。

代码笔示例:https://codepen.io/sentaipadas/pen/mNeboE