时间戳

首页 > 解决方案 > 在 React js 中导出多个非功能组件

reactjs - 在 React js 中导出多个非功能组件

问题描述

我正在尝试创建一个组件 Book，它有一个标题，我希望能够在 App.js 中导入它，如下面的代码所示，我对反应还很陌生，我不知道如何查找因为我不知道这个概念是怎么称呼的。如何制作一个组件书，并且该组件具有其他非功能性组件，例如用于标题书的 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>
  );
}

标签： reactjs

解决方案

它必须是基于类的组件才能扩展该组件的功能，在这种情况下，您的 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>
);

推荐阅读