Многоразовая боковая панель с пользовательским контентом Semanti c UI - PullRequest
Новая
       12

Многоразовая боковая панель с пользовательским контентом Semanti c UI

0 голосов
/ 20 апреля 2020

У меня есть основа c <Sidebar /> от semanti c 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>
    </>
  );
};

У меня есть коды и поле здесь

Ответы [ 2 ]

2 голосов
/ 20 апреля 2020

, поскольку бла является функциональным компонентом, вы можете передать его как дочерний элемент 

<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>

Рабочая демонстрация

Решение 2 :

Вы также можете делать то, что делаете, вы можете передать бла в качестве реквизита и отобразить его, вызвав его как функцию 

<Sidebar.Pusher>
       {props.content()} // since blah is a function
  </Sidebar.Pusher>
1 голос
/ 20 апреля 2020

Вы можете использовать children реквизиты для передачи дочерних элементов непосредственно в их выходные данные

Боковая панель. 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>
    </>
  );
};

Попробуйте демо

...