Question

我正在使用react-scroll导航到同一页面上的不同部分。我一直在遵循一个教程，并且一切正常，但是每个部分都有虚拟文本，现在我不知道如何将内容更改为组件。基本上，我有三个组件，但我希望在我的网页的每个部分中显示一个组件，但无法正常工作。我不想在每个部分中使用title，subtitle，dark等。相反，我只想将整个组件放在该部分中。

有人可以告诉我如何将我的一个组成部分放在每个部分中（三个组成部分和三个组成部分）吗？这是否可能，或者我是否必须重新构建网站的结构，以便将内容分成不同的部分，如section.js中所示？

重要：我不了解的部分是如何链接Section.js中的内容：

Section.js

import React from "react";

export default function Section({ title, subtitle, dark, id }) {
  return (
    <div className={"section" + (dark ? " section-dark" : "")}>
      <div className="section-content" id={id}>
        <h1>{title}</h1>
        <p>{subtitle}</p>
      </div>
    </div>
  );
}

App.js

class App extends Component {
  render() {
    return (
      <div className="App">
        <Navbar />
        <Section
          title="section1"
          subtitle={dummyText}
          id="section1"
        />
        <Section
          title="section2"
          subtitle={dummyText}
          dark={false}
          id="section2"
        />
        <Section
          title="section3"
          subtitle={dummyText}
          dark={true}
          id="section3"
        />
      </div>

Navbar.js

 <nav className="nav" id="navbar">
        <div className="nav-content">
          <button
            className="nav-logo"
            alt="Logo"
            onClick={this.scrollToTop}
          >Top</button>
          <ul className="nav-items">
            <li className="nav-item">
              <Link
                activeClass="active"
                to="section1"
                spy={true}
                smooth={true}
                offset={-70}
                duration={500}
              >
                About
              </Link>
            </li>

Answer 1

您是否需要将组件传递给Section Component而不是这些参数？

{ title, subtitle, dark, id }

在这种情况下，您可以使用children

export default function Section({ children }) {
    return (
        <div>
          {children}
        </div>
    );
}

然后您可以将组件放在这里：

<div className="App">
    <Section>
        // your component
    </Section>
</div>

无法通过反应滚动导航显示组件

1 个答案: