Question

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

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

首先，我尝试创建并将一种方法传递给两者点击下方的听众，只有第一个参考才能切换，无论点击两个元素都在监听点击事件。

现在，我有它工作，但有两个差异方法完成相同的事情。

这似乎远非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>

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

1 个答案: