相关疑难解决方法(0)

我是ReactJS的新手.直到现在我正在使用JQuery来设置我需要的任何动画或某些功能.但现在我正在尝试使用ReactJS并使用JQuery进行最小化.

我的案例是:
我正在尝试建立自己的手风琴,使用JQuery我可以做到,但是使用ReactJS我不明白如何做到.

<div class="accor">
   <div class="head">Head 1</div>
   <div class="body hide">Body 1</div>
</div>
<div class="accor">
   <div class="head">Head 1</div>
   <div class="body hide">Body 1</div>
</div>
<div class="accor">
   <div class="head">Head 1</div>
   <div class="body hide">Body 1</div>
</div>

使用JQuery:

$('.accor > .head').on('click', function(){
   $('.accor > .body').slideUp();
   $(this).next().slideDown();
});

我的问题:
1.如何在ReactJS中做到这一点？

谢谢你

我正在将一个HTML使用 bootstrap 的静态站点转换为 React.js 这里有几个 div 仅在 data-target 和 data-toggle 上打开。

<div className="card-header" id="headingFive">
   <h5 className="mb-0">
      <button
            className="btn btn-link"
            type="button"
            data-toggle="collapse"
            data-target="#collapseFive"
            aria-expanded="true"
            aria-controls="collapseOne">
            Site Wide Events
      </button>
    </h5>
</div>

<div
   id="collapseFive"
   className="collapse show"
   aria-labelledby="headingFive"
   data-parent="#accordionThree">
    <div className="card-body">
        <div className="row">
            <div className="col wall">
                <h4 className="text-center">12</h4>
                <p className="text-center">Target</p>
            </div>
            <div className="col">
                <h4 className="text-center">13</h4>
                <p className="text-center">Actual</p>
            </div>
        </div>
    </div>
</div>

我不想使用任何其他npm模块来实现相同的目的。

我尝试了这个但无法解决。

componentDidUpdate() {
    $('.collapse').bootstrapToggle();
}

我是 React.js 的新手，自从我开始阅读文档和教程以来，我不确定 Bootstrap 如何与 React.js 一起工作。

我看到了几个 npm 包，例如reactstrap或react-bootstrap，但是，我不明白。HTML 代码来自返回一段 HTML 的方法（如下所示）：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

如果我是对的...

所以，我的问题是：

• 我应该将Bootstrap 的<link/>or添加 …