css - Bootstrap Accordion 显示最初在 React 应用程序中打开的所有元素，应关闭

Question

这是 Accordion 的 React (JSX) 代码:

  <div className="panel panel-default receipe">
    <div className="panel-heading">
      <h4 className="panel-title">
        <a data-toggle="collapse" data-parent="#recipes" href={"#collapse"+i}>
          {recipe.name}
        </a>          
      </h4>
    </div>
    <div id={"collapse"+(i++)} class="panel-collapse collapse">
      <Ingredients ingredients={recipe.ingredients}/>
    </div>
  </div>  

代码笔:http://codepen.io/lafisrap/pen/LWdovO

正确显示标题和元素，元素可以打开和关闭。只是他们一开始是开放的。我不想使用 $("#receipes").collapse("hide"); 因为它不好 ;-) 将 jQuery 代码放入 React。 (其他意见？)

Answer 1

你的问题是你正在使用 class而不是 className在这条线上:

<div id={"collapse"+(i++)} class="panel-collapse collapse">

检查代码笔中的第 48 行。

顺便说一下，我认为这行 id={"collapse"+(i++)}也可以这样写:

id={`collapse${i++}`}

看起来更好