Question

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

尝试一下。我不能完全确定需求部分是否可以在React中运行，也可以在我的Node应用程序中运行。如果不起作用，请研究如何通过“ module.exports = ...”方式导入导出的模块：）

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

2 个答案: