Question

在我的React App中，我需要使用以下方法折叠嵌套的表行：

renderRow(parameters, keyName, depth) {
  let id = Math.random()
    .toString(36)
    .substring(7);
  let miscRow = this.renderMiscParamTableRow(parameters[keyName], depth, id);

  if (miscRow === null) {
    return (
      <tr className="normal-row" key={id}>
        <td>{this.renderRowName(keyName, parameters[keyName])}</td>
        <td>{this.renderRowType(parameters[keyName])}</td>
        <td>{this.renderDescription(parameters[keyName])}</td>
      </tr>
    );
  }

  return (
    <React.Fragment key={id}>
      <tr
        style={{ cursor: "pointer" }}
        data-toggle="collapse"
        data-target={"#" + id}
        onClick={() => {
          window.$("#" + id + "_rotate").toggleClass("upside");
        }}
        className="accordion-toggle toggle normal-row"
      >
        <td>
          <div className="main-cell" style={{ whiteSpace: "nowrap" }}>
            {this.renderRowName(keyName, parameters[keyName])}{" "}
            <span id={id + "_rotate"} className="rotate fa fa-chevron-down">
              {" "}
            </span>
          </div>
        </td>
        <td>{this.renderRowType(parameters[keyName])}</td>
        <td>{this.renderDescription(parameters[keyName])}</td>
      </tr>
      {miscRow}
    </React.Fragment>
  );
}

使用此功能的组件称为ParameterTable，其用法如下： App->MainItem->ViewContent->ParameterTable（如果相关）。

问题：

我获取传递到组件的数据，当我单击行时，它并不总是展开。有时，所有表都可以切换，有时无论嵌套级别如何（最多5个嵌套表）都可以切换20个表中的2个。

引导程序通过script标记加载到public / index.html文件中。

任何想法，为什么会发生这种情况以及我该如何解决？

Bootstrap崩溃在React中不可靠

0 个答案: