bootstrap-4 - 从父组件更改数据后，子组件中的动态选项卡窗格未激活

Question

所以我在侧边栏中有这个父选项，每个选项都从同一个集合中加载数据并将其带入子组件，在子组件中我正在渲染一个选项卡窗格列表，我希望每当我更改父级时，第一个选项卡窗格应该是活动的并且也打开它的内容，但它确实显示为活动的，但没有在它下面打开它的内容，所以我必须再次点击它才能打开内容。如何确保选项卡窗格内容必须在其下打开？

{cdata.fathers && cdata.fathers.length ? (
    <div className={st.fatherTabs}>
      <div className={st.ulEdits} id="father-ul">
        <ul className="nav nav-tabs">
          {cdata.fathers &&
            cdata.fathers.map((father, key) => {
              return (
                <li
                  className="nav-item"
                  // id={`toggleSelectedFather-${key}`}
                  key={`father-${key}`}
                  onClick={() =>{
                    setSelectedFather({ ...father, index: key });
                    localStorage.setItem('Fatherindex', key);
                  }}
                >
                  <a
                    className="nav-lik fathertab"
                    data-toggle="pill"
                    href="#s1"
                    id={`selectedFather-${key}`}
                    onClick={() => {
                      togActiveFatherStyling(`selectedFather-${key}`);
                    }}
                  >
                    <span>Option</span> {key + 1}
                  </a>
                </li>
              );
            })}
          <li className={st.addFatherCircle}>
            <span
              id={`father-add-btn-${fatherLoadIndex}`}
              ref={father_add_btn}
              onClick={() => { addFatherFunction(); setSelectedFatherTab(fatherLoadIndex) }}
            >
              <MdAdd />
            </span>
          </li>
        </ul>
      </div>
      <div>
        {selectedFather && (
          <div className="tab-content">
            <div className={"tab-pane active"} id="s1">
              <div className={st.sdRight2}>
                <div className={st.sdRightHeader}>
                  <main>
                    <h1
                      className={st.fatherHeadTree}
                      id={
                        "father_" +
                        cdata.service_id +
                        "_" +
                        selectedFather.select_option_id
                      }
                    >

这里没有完整的 html，但我认为它足以给出一个想法。

标签： bootstrap-4next.js