为反应组件重构jQuery

Question

我正在使用jQuery来做一些快速隐藏，显示和css更改，因为我正在使用需要重新呈现的react中的组件，因此不会触发需要页面刷新的jQuery操作。我认为我的问题是我需要在每个组件中设置状态，但我对如何设置有点困惑。以下是此特定视图的jquery示例：

<script type="text/javascript">
        $(document).ready(function () {
           $(".schedule-times").hide();
           $(".final-check").hide();

           $(".available-time").on('click', function () {
              $(".schedule-times").toggle();
            });

            $(".schedule-button").on('click', function () {
              $('.finalize-timeline').css("background", "#4CAF50");
              $(".final-check").show();
            });
        });
    </script>

这是我编写的组件的示例：

import React, { Component } from 'react';
import '../../App.css';

import Calendar from '../Calendar';

import { Link } from 'react-router';

class Schedule_3 extends Component {
  render() {
    return (
      <div className="wow fadeIn"> 
        <div className="container"> 
            <div className="timeline">
                <div className="col-md-12 offset-md-2">
                    <div className="row">
                            <div className="col-md-2 timeline-box">
                                <div className="timeline-badge active-timeline">
                                <i className="fa fa-check wow bounceInDown"></i>
                                </div>
                                <span>How do you want to schedule?</span>
                            </div>
                            <div className="col-md-2 timeline-box">
                                <div className="timeline-badge active-timeline">
                                <i className="fa fa-check wow bounceInDown"></i>
                                </div>
                                <span>Pick your lesson type</span>
                            </div>
                            <div className="col-md-2 timeline-box">
                                <div className="timeline-badge active-timeline">
                                </div>
                                <span>Find a time</span>
                            </div>
                            <div className="col-md-2 timeline-box">
                                <div className="timeline-badge" id="no_border">
                                </div>
                                <span>Finalize</span>
                            </div>
                        </div>
                    </div>
                </div>
              <div className="row">
                <div className="container">
                    <div className="col-md-6 offset-md-3">
                        <Calendar />
                    </div>
                </div>
              </div><br />
              <div className="row schedule-times">
                <div className="col-md-12 offset-md-2">
                    <div className="row">
                        <div className="col-md-4 offset-md-1">
                            <i className="fa fa-clock"></i>&nbsp;
                            10:30AM
                        </div>
                        <div className="col-md-2 offset-md-1">
                            <Link to="Schedule_4">
                                <button className="btn btn-primary">
                                Book Now
                                </button>
                            </Link>
                        </div>
                    </div><br />
                    <div className="row">
                        <div className="col-md-4 offset-md-1">
                            <i className="fa fa-clock"></i>&nbsp;
                            11:00AM
                        </div>
                        <div className="col-md-2 offset-md-1">
                            <button className="btn btn-primary">
                            Book Now
                            </button>
                        </div>
                    </div><br />
                    <div className="row">
                        <div className="col-md-4 offset-md-1">
                            <i className="fa fa-clock"></i>&nbsp;
                            11:30AM
                        </div>
                        <div className="col-md-2 offset-md-1">
                            <button className="btn btn-primary">
                            Book Now
                            </button>
                        </div>
                    </div>
                </div>
              </div>
          </div>
      </div>
    );
  }
}

export default Schedule_3;

Answer 1

看看你的代码，我建议你需要做的第一件事就是将它分成更小，更易于管理和更易读的组件，这些组件负责一件事。

正如你发布了一个很好的例子，我无法向你展示如何为每个案例做到这一点，但我可以给你一个简单的例子，可以根据你的用例进行调整。

class ToggleContent extends React.Component {
  constructor() {
    super();

    this.state = { hidden: true };

    this.toggleContent = this.toggleContent.bind(this);
  }

  toggleContent() {
    this.setState(prevState => ({
      hidden: !prevState.hidden
    }));
  }

  render() {
    const { hidden } = this.state;
    const { children } = this.props;
    return (
      <div>
        <button onClick={ this.toggleContent }>Toggle</button>
        <div>
          { !hidden && children }
        </div>
      </div>
    );
  }
}

您可以使用此组件，如<ToggleContent>Hello World</ToggleContent>，它将在按钮按下时切换Hello World的可见性。您可以在其中放置任何内容，包括其他组件，它不必只是文本。

You can see an example of it running here.

你可以看到children是否被隐藏的状态保存在组件this.state = { hidden: true };中。

如果没有隐藏，如果!hidden === true，孩子们将被渲染。我们可以在这里看到{ !hidden && children }。

然后toggleContent方法使用先前的状态在隐藏和显示之间来回切换。

toggleContent() {
    this.setState(prevState => ({
      hidden: !prevState.hidden
    }));
  }