Как я могу динамически прикрепить компоненты боковой панели к нескольким экземплярам боковой панели?

Question

Я новичок в React и создаю дизайн, который столкнулся с проблемой.

У меня есть компонент под названием SideBar.Я использую этот компонент два раза, по одному на каждой стороне страницы.

Проблема в том, что я хотел бы добавить разные компоненты к каждому экземпляру компонента SideBar.Это будут списки различных элементов и т. Д. Я предполагал, что смогу добавить теги следующих компонентов, но компонент боковой панели не выводит.

import React, { Component } from "react";
import SideBar from "./WorkspaceComponents/SideBar";
import ScrollerBox from "./WorkspaceComponents/SideBarComponents/ScrollerBox";

class Workspace extends Component {
  render() {
    return (
      <main className="reely-workspace">
        <SideBar position="SideBarLeft">
          <ScrollerBox />
        </SideBar>
        <SideBar position="SideBarRight" />
      </main>
    );
  }
}

export default Workspace;

Answer 1

Вы можете сделать ваш SideBar Компонент компонентом-оберткой, который обернет содержимое, указанное в нем.

Создание компонента SideBar в качестве компонента-обертки:

class Sidebar extends Component {
  render() {
    return (
      <div className="sidebar">
        // You can add any custom element here //
        {this.props.children}
      </div>
    )
  }
}

Весь ваш элемент, переданный внутри компонента SideBar, теперь будет отображаться как часть SideBar вместе с тем, что он содержит.

Способ использования компонента-оболочки:

<SideBar>
   <Content1></Content1>
   <Content2></Content2>
   <Content3></Content3>
</SideBar>

Answer 2

Ваш компонент боковой панели должен получить children реквизит и вынести его.

Примерно так:

class Sidebar extends Component {
  render() {
    const {children} = this.props;
    return (
      <div className="sidebar">
        <h1>Sidebar</h1>
        {children}
      </div>
    )
  }
}

Ознакомьтесь с этим постом по документам о реагировании, чтобы понять, как составить реакциюкомпоненты: https://reactjs.org/docs/composition-vs-inheritance.html