Question

我已经上网了一段时间了，根本没有希望。

我正在使用“折叠”引导程序来切换div的可见性。

我需要通过react onClick来控制这种切换。 Bootstrap说可以通过“ $（'。collapse'）。collapse（）”进行访问，但是由于某些原因，我无法在react .....除导入jQuery或使用react-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

Bootstrap javascript取决于jQuery。 jQuery和React具有不同的方式来操作DOM。为了避免将来出现问题，您不应同时使用两者。如果您使用的是React，那么thinking in React很重要。

Bootstrap的一个很好的React包装器是reactstrap。我建议您使用该库来构建基于Bootstrap的组件，而不要编写Bootstrap原始类。如示例代码here所示，名为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>

React js-使用Bootstrap4 CDN，如何在react中手动启用javascript事件处理程序？

2 个答案: