Question

这是手风琴的反应（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>

Codepen：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++}`}

看起来更好

Bootstrap的手风琴显示最初在React app中打开的所有项目应该关闭

1 个答案: