將 react.js 中已渲染元素的 innerHTML 設置為組件

Question

我正在使用 react.js 中的 ionic ui 庫，這是我的代碼

 <IonTabBar slot="bottom">
      {page.tabs.map(tab => {
        const Icon = Icons[`${tab.icon}`];

        return (
          <IonTabButton>
            <Icon
              style={{
                fontSize: "20px"
              }}
            />
            <IonLabel
              style={{
                fontSize: "14px"
              }}
            >
              {" "}
              {tab.text}{" "}
            </IonLabel>
          </IonTabButton>
        );
      })}
    </IonTabBar>
  </IonTabs>

當在瀏覽器上呈現時，它有這個

 <div>
  <div class="tabs-inner"> </div>
  <ion-tab-bar>
    <ion-tab-button>
      <svg>
       .....
      </svg>
      <ion-label>
        user
      </ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</div>

現在我想將一個組件注入到“tabs-inner”類中，所以我的靈魂是給 div 一個引用並使用它找到它

 const tab = tabsRef.current.getElementsByClassName('tabs-inner')[0]

現在我想將一個組件注入到帶有tabs-inner類的 div 中說

tab.innerHTML = 'am here'

那行得通，但如果我嘗試

tab.innerHTML = <Mycomponent/>

它沒有，我試圖將 innerHTML 設置為一個標簽，以便我可以將組件注入其中。

有任何想法嗎？

Answer 1

您可以嘗試將要渲染的組件置於 Component 的狀態並進行相應的渲染。 如果您不想在特定時間渲染任何內容，您可以將該狀態鍵設置為 null。

constrcutor(props) {
    super(props);
    this.state = {
        componentToRender: null
    };
}

componentDidMount() {
    setTimeout(() => {
        this.setState({
            componentToRender: <b>Hello World</b>
        });
    }, 1000);
}

render() {
    return (
        <div className="">
            { this.state.componentToRender }
        </div>
    );
}

在上面的示例中，我只是在 1 秒后設置 HTML，但您可以隨時設置數據。

Answer 2

因此，在進行了一些挖掘之后，我發現了一種使用react-dom導入hydrate的不太明智的方法

import { hydrate } from "react-dom";
.........
const tab = tabsRef.current.getElementsByClassName("tabs-inner")[0];
hydrate(
  <Canvas/>,
  tab
);

這適用於大多數情況，對我來說很酷，但我在我的畫布容器中使用了 redux 並且它產生了其他錯誤。