具有自定义内容语义的可重复使用侧边栏 UI

Question

我有一个基本的 <Sidebar /> 来自语义 ui 的反应。我希望能够跨多个页面重用此组件 -- 在大多数情况下传递不同的内容。

这是可重复使用的边栏组件

const SidebarExample = () => {
  const [visible, setVisible] = useState({ name: "visible" });

  return (
    <Sidebar.Pushable as={Segment}>
      <Sidebar
        as={Menu}
        animation="push"
        icon="labeled"
        inverted
        onHide={() => setVisible(false)}
        vertical
        visible={visible}
        width="thin"
      >
        <Menu.Item as="a">
          <Icon name="home" />
          Home
        </Menu.Item>
        <Menu.Item as="a">
          <Icon name="gamepad" />
          Games
        </Menu.Item>
        <Menu.Item as="a">
          <Icon name="camera" />
          Channels
        </Menu.Item>
      </Sidebar>

      <Sidebar.Pusher>
        <Segment>
          <Header as="h3">Application Content</Header>
          <Image src="https://react.semantic-ui.com/images/wireframe/paragraph.png" />
          <Image src="https://react.semantic-ui.com/images/wireframe/paragraph.png" />
          <Image src="https://react.semantic-ui.com/images/wireframe/paragraph.png" />
          <Image src="https://react.semantic-ui.com/images/wireframe/paragraph.png" />
        </Segment>
      </Sidebar.Pusher>
    </Sidebar.Pushable>
  );
};

我的问题是如何将自定义内容传递给 <Sidebar.Pusher>？假设我有一个仪表板组件，我在其中导入了这个侧边栏。我不应该做这样的事情吗？

const blah = props => {
  return (
    <div>
      <h1> custom content </h1>
    </div>
  );
};

const Dashboard = props => {
  return (
    <>
      <div>
        <h1> Dashboard </h1>
        <SidebarExample content={blah} />;
      </div>
    </>
  );
};

我有一个codesandbox here

Answer 1

您可以使用 children 属性将子元素直接传递到它们的输出中

Sidebar.js

return (
    <Sidebar.Pushable as={Segment}>
      <Sidebar
        as={Menu}
        animation="push"
        icon="labeled"
        inverted
        onHide={() => setVisible(false)}
        vertical
        visible={visible}
        width="thin"
      >
        <Menu.Item as="a">
          <Icon name="home" />
          Home
        </Menu.Item>
        <Menu.Item as="a">
          <Icon name="gamepad" />
          Games
        </Menu.Item>
        <Menu.Item as="a">
          <Icon name="camera" />
          Channels
        </Menu.Item>
      </Sidebar>

      <Sidebar.Pusher>
        <Segment>
          <Header as="h3">Application Content</Header>
          <Image src="https://react.semantic-ui.com/images/wireframe/paragraph.png" />
          <Image src="https://react.semantic-ui.com/images/wireframe/paragraph.png" />
          <Image src="https://react.semantic-ui.com/images/wireframe/paragraph.png" />
          <Image src="https://react.semantic-ui.com/images/wireframe/paragraph.png" />
        {props.children} // show children
        </Segment>
      </Sidebar.Pusher>
    </Sidebar.Pushable>
  );

并像这样在您的组件中传递您的内容

const blah = props => {
  return (
    <div>
      <h1> custom content </h1>
    </div>
  );
};

const Dashboard = props => {
  return (
    <>
      <div>
        <h1> Dashboard </h1>
        <SidebarExample>
            {blah()} // add jsx here
        </SidebarExample>
      </div>
    </>
  );
};

试试这个 demo

Answer 2

因为 blah 是功能组件，您可以将其作为子组件传递

<SidebarExample><Blah/></SidebarExample>;

const Blah = props => { // make sure to name it as capital letter
  return (
    <div>
      <h1> custom content </h1>
    </div>
  );
};

并在 SideBarExample 中将其命名为

<Sidebar.Pusher>
   {props.children}
 </Sidebar.Pusher>

Working Demo

解决方案 2：

你也可以按照你现在的方式去做，你可以将 blah 作为 prop 传递，然后通过调用它作为函数来渲染它

<Sidebar.Pusher>
       {props.content()} // since blah is a function
  </Sidebar.Pusher>

具有自定义内容语义的可重复使用侧边栏 UI

Re-usable sidebar with custom content Semantic UI

reactjs

semantic-ui-react