时间戳

首页 > 解决方案 > 反应列表，if else 究竟如何工作？

reactjs - 反应列表，if else 究竟如何工作？

问题描述

所以在我的 React App 中，我基本上有三个按钮。单击特定按钮时，我想将单击的值更新为 true。我还希望其他未点击的项目是错误的。是否有另一种方法来定位未点击的元素？我得到了这个解决方案，但对它的工作原理感到困惑。我认为如果第一个 if 语句返回 true，那么 else if 就不会运行？那么有人可以解释一下它们是如何运行的吗？

class App extends React.Component {
  // state
  state = {
    list: this.props.tabs,
    currentTabContent: '',
  };

  // event handlers
  onButtonClick(tab) {
    // ======THIS IS WHAT I DON'T UNDERSTAND========
    const newList = this.state.list.map((item) => {
      if (item === tab) {
        item.clicked = true;
      } else if (item !== tab) {
        item.clicked = false;
      }
      return item;
    });
    // ==============================================

    this.setState({
      currentTabContent: tab.content,
      list: newList,
    });
  }

  // helpers 

  renderButtons() {
    return this.props.tabs.map((tab, index) => (
      <li key={index}>
        <button
          className={tab.clicked ? 'offset' : null}
          onClick={() => this.onButtonClick(tab)}
        >
          {tab.name}
        </button>
      </li>
    ));
  }

  renderContent() {
    return this.state.currentTabContent;
  }

  render() {
    return (
      <div className="App">
        <ul>{this.renderButtons()}</ul>
        <div className="display">{this.renderContent()}</div>
      </div>
    );
  }
}

export default App;

标签： reactjs

解决方案

我认为您的误解更多在于不太了解if...else if，而不是与 React 无关。让我们看看你的情况：

      if (item === tab) {
        item.clicked = true;
      } else if (item !== tab) {
        item.clicked = false;
      }

      return item;

此函数在按钮的单击处理程序调用以下内容时运行：

() => this.onButtonClick(tab)

其中 tab 是对应于特定按钮的特定对象。然后，您在状态中映射list，这似乎是相同的选项卡列表。对于每个对象，它检查tab === listItem第一个块中的内容是否为真，这就是正确按钮设置为真的原因。然后它不会评估该项目的第二个条件，而只是返回该项目。

然后它移动到不等于 tab 的其他项目，并且它们在第二个条件下进行评估，因此它们被标记为 false clicked。

您的代码中有一些更令人担忧和更大的问题，这些问题与您在对象和组件的数据流之间进行比较有关，但这些不是您的问题的主题，我只是想警告您以后请多多关照。

推荐阅读