我如何重复使用一种方法来处理多个反应中的不同参考

Question

我正在使用jQuery进行React应用程序上的某些UI操作。(我知道，我知道...：(

为什么我需要编写不同的方法(行为相同(才能切换导航栏的各个部分？

首先，我尝试创建并仅通过一种方法 ot二单击侦听器bellow，只有首先ref 才能切换，无论单击即可单击这两个元素都在收听点击事件。

现在，我的工作正常

似乎远非干燥的方法。

我想念什么吗？

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>