React JS - Использование Bootstrap4 CDN, как вручную включить обработчики событий JavaScript в реагировать?

Question

Я какое-то время ходил по Интернету без всякой надежды.

Я использую загрузчик «collapse» для переключения видимости div.

Мне нужно контролировать это переключение с помощью реакции на клик.Bootstrap говорит, что можно получить доступ через "$ ('. Collapse'). Collapse ()", но по какой-то причине я не могу сделать это в реагировать ... любые предложения, кроме импорта jQuery или использования компонентаact-bootstrap ??

class Container extends Component {
  render() {
   return (

     <div className="wrapper">

          <div className="collapse in" id="collapseExample">
           <h1>Hide me</h1>
          </div>

          <div className="container">
           <div className="row">
             <button
              data-toggle="collapse"
              data-target="#collapseExample"
              aria-expanded="false"
              aria-controls="collapseExample">
              Get a random Book
            </button>
          </div>
         </div>

    </div>

)}

Answer 1

Загрузка Javascript зависит от jQuery. У jQuery и React есть разные способы манипулирования DOM. Чтобы избежать проблем в будущем, вы не должны использовать оба. Если вы используете React, мышление в React важно.

Хорошая оболочка React Bootstrap - Reactionstrap . Я рекомендую вам использовать библиотеку для сборки компонента на основе Bootstrap, а не писать класс Bootstrap raw. Компонент с именем Collapse может соответствовать вашим потребностям, как вы можете видеть в примере кода здесь .

Если вы вообще не заинтересованы в импорте какой-либо библиотеки, довольно просто написать компонент самостоятельно, используя state. Внутренняя идея похожа на пример кода Collapse, приведенный выше:

class MyCollapse extends Component {
  state = {
    isOpen: false
  };

  toggleState = () => this.setState( prevState => ({ isOpen: !prevState.isOpen }));

  render() {
    return (
      <div>
        <button onClick={this.toggleState}>Click to toggle</button>
        {
          this.state.isOpen &&
          <div className="my-collapse">
            {/* COLLAPSE CONTENT */}
          </div>
        }
      </div>
    )
  };
}

Каждый раз, когда вы нажимаете кнопку, атрибут состояния isOpen переключается, что приводит к повторной визуализации компонента. Это одна из самых сильных сторон React: очень гибкая.

Answer 2

Следующий фрагмент иллюстрирует, как это должно быть сделано. Если он по-прежнему не работает в вашей программе, я бы проверил правильность ссылок на скрипты CDN.

Напоминание: в ReactJS мы никогда не должны использовать jQuery, вместо этого мы манипулируем виртуальной DOM через компоненты.

// Example stateless functional component
const SFC = props => (
  <div>{props.label}</div>
);

// Example class component
class Container extends React.Component {
  render() {
     return (

       <div className="wrapper">

            <div className="collapse" id="collapseExample">
             <h1 className="card card-body">Hide me</h1>
            </div>

            <div className="container">
             <div className="row">
               <button className="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Get a random book</button>
            </div>
           </div>

      </div>
  ) }
}

// Render it
ReactDOM.render(
  <Container/>,
  document.getElementById("react")
);

<div id="react"></div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>