如何重用一个方法来处理 React 中的多个不同的 refs？

Question

我正在使用 jQuery 对 React 应用程序进行一些 UI 操作。 （我知道，我知道... :)

为什么我需要编写不同的方法（行为相同）来切换导航栏的不同部分？

首先，我尝试创建 一个方法并将其传递给 both 下面的点击侦听器，只有 first 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>