在 React js 中導出多個非功能性組件

Question

我正在嘗試創建一個組件 Book，它有一個標題，我希望能夠將它導入 App.js 中，如下面的代碼所示，我對反應還很陌生，我不知道如何查找因為我不知道這個概念是怎么稱呼的。 如何制作組件 Book 並且該組件具有其他非功能性組件，例如用於標題書的 Book.Header 或 Book.Title，並且我可以按照 App.js 中所示使用這些組件

const Book = () => (
  <div className="book">
    <Book.Header />
  </div>
);

Book.Header = ({child}) => (
  <div><p>{child}</p></div> // here should render the text from Book.Header in App.js
);

export default Book;

在 App.js 中

import Book from "./components/Book";
function App() {
  return (
    <div className="App">
      <Book
        <Book.Header>My book header</Book.Header> // I want to render this in 
         // Book.Header 
      >
      </Book>
    </div>
  );
}

Answer 1

它必須是基於類的組件才能擴展該組件的功能，在這種情況下，您的 Book 組件將如下所示：

class Book extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      header: this.props.children // path to children
    };
  }
  render() {
    const { header } = this.state;
    return (
      <div>
        <Book.Header header={header}/>
      </div>
    );
  }
}

Book.Header = ({header}) => (
  <div>
    <p>{Header}</p>
  </div>
);

Answer 2

書籍和標題

const Book = () => (
  <div className="book">
    <Book.Header />
  </div>
);

Book.Header = () => (
  <div><p>This is the header</p></div>
);

module.exports = { Book, Header };

和 App.js

const Book = require = ("./components/Book");
function App() {
  return (
    <div className="App">
      <Book.Book
        <Book.Header>My book header</Book.Header>
      >
      </Book.Book>
    </div>
  );
}

嘗試這個。 我不完全確定 require 部分是否適用於 React，但它適用於我的 Node 應用程序。 如果它不起作用，請查看如何通過“module.exports = ...”方式導入導出的模塊:)