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

您的侧边栏组件应收到一个children道具并将其渲染出来。

类似这样的东西：

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

查看有关react docs的这篇文章，以了解如何组成react组件：https://reactjs.org/docs/composition-vs-inheritance.html

Answer 2

您可以将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>

如何将补充工具栏组件动态附加到补充工具栏的多个实例？

2 个答案: