將React組件與HTML塊混合

Question

一直讓我感到困惑的是，有多少個React示例將所有內容顯示為組件。 但讓我們說，我只需要在組件旁邊包含一些簡單的HTML，例如：

class Homepage extends Component {
  render() {
    return (
      <Container>
        <Hero />
        <Features />
        <div className="copyright">Copyright Some Company Name.</div>
      </Container>
    );
  }
}

div元素永遠不會超過靜態文本。

應該將<div>移到純組件中嗎？ 還是可以通過添加純HTML來簡化Homepage組件？

Answer 1

當然可以。 總而言之，最后是HTML。 當您調用render函數時，React組件是一組html元素。

我遵循的一條經驗法則是：當您認為有新職責時，請創建一個新組件。

Answer 2

該div與其他任何div一樣都是一個組件，只是它是“原始”組件。 將HTML中的原始組件與您自己的自定義組件混合應該沒有問題。