如何在 React 中重用一個方法來處理多個不同的引用？

Question

我在 React 應用程序上使用 jQuery 進行一些 UI 操作。 （我知道我知道... ：）

為什么我需要編寫不同的方法（行為相同）才能切換導航欄的不同部分？

首先，我嘗試創建一個方法並將其傳遞給下面的兩個單擊偵聽器，無論單擊偵聽單擊事件的兩個元素，只有第一個 ref會切換。

現在，我讓它工作了，而是用兩個 diff 方法做完全相同的事情。

這似乎與 DRY 方法相去甚遠。

我錯過了什么嗎？

import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';
import $ from 'jquery';

class Navigation extends Component {
  componentDidMount() {
    this.$el = $(this.el);
    this.$el.slideToggle();
  }

  componentWillUnmount() {
    this.$el.slideToggle('destroy');
  }

  //handle first dropdown
  portifolioDropdownToggle = () => {
    const el = findDOMNode(this.refs.ptoggle);
    $(el).slideToggle();
  }
  //handle second dropdown 
  servicesDropdownToggle = () => {
    const el = findDOMNode(this.refs.servtoggle);
    $(el).slideToggle();
  }

  render() {
    return (
          <div>
          <nav>
            <ul className="nav-list" >
              <li><a href="#!">Home</a></li>
              <li><a href="#!">About</a></li>
              {/* First Dropdown */}
              <li>
                <a href="#!" onClick={this.servicesDropdownToggle}>Services</a>
                <ul className="nav-dropdown" ref="servtoggle">
                  <li>
                    <a href="#!">Web Design</a>
                  </li>
                  <li>
                    <a href="#!">Web Development</a>
                  </li>
                </ul>
              </li>
              {/* Second Dropdown */}
              <li><a href="#!">Pricing</a></li>
              <li>
                <a href="#!" onClick={this.portifolioDropdownToggle}>Portfolio</a>
                <ul className="nav-dropdown" ref="ptoggle">
                  <li>
                    <a href="#!">Web Design</a>
                  </li>
                  <li>
                    <a href="#!">Web Development</a>
                  </li>
                </ul>
              </li>
            </ul>
          </nav>
        </div>
    )
  }

}

export default Navigation;

Answer 1

如果將標識符作為參數傳遞給方法，則可以重用它。

handleToggle = (thingToToggle) => {
    const el = findDOMNode(thingToToggle);
    $(el).slideToggle();
  }

然后在你的渲染方法中，你可以像這樣使用它......

 <a href="#!" onClick={() => this.handleToggle(this.refs.ptoggle)}>Portfolio</a>

並像這樣重復使用它......

<a href="#!" onClick={() => this.handleToggle(this.refs.servtoggle)}>Services</a>