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

Я пробовал без использования пользовательского интерфейса со стилями, но происходит то же самое.

Вот как он выводит, используя базовый рендеринг, используя return <div>{this.props.children}</div> или код ниже.

Код:

Главная страница

<SideMenu>
    <Tab id="Search" header="Search" icon={<SearchIcon />}>
        <p>Some text</p>
    </Tab>
    <Tab  id="home" header="Home" icon={<SearchIcon />}>
        <h1>Some text again</h1>
    </Tab>
</SideMenu>

sideMenu

import React from "react";
import PropTypes from "prop-types";

import {
  withStyles
} from "@material-ui/core";

import styles from "./styles";

class SideMenu extends React.Component {
  static propTypes = {
    classes: PropTypes.object.isRequired,
    children: PropTypes.any,
    // events
  };

  state = {

  }

  renderChildren(children) {
    return React.Children.map(children, p =>
      React.cloneElement(p, {})
    )
  }

  render() {
    const { children, classes } = this.props;

    return (
      <div className={classes.sideMenuRoot}>
        <div className={classes.sideMenuTabPane}>
        </div>

        <div className={classes.sideMenuContent}>
          {this.renderChildren(children)}
        </div>
      </div>
    );
  }
}

export default withStyles(styles)(SideMenu);

табуляция

import React from "react";
import PropTypes from "prop-types";

class Tab extends React.Component {
  static propTypes = {};

  state = {};

  render() {
    return null
  }
}

export default Tab;

0
Kennyist

1 ответ

Не думайте, что вам нужно выполнять всю функцию renderChildren. Сделал что-то подобное раньше, нужно только передать {детей}.

Главная страница:

<SideMenu>
    <Tab id="Search" header="Search" icon={<SearchIcon />} text="Some Text" />
    <Tab  id="home" header="Home" icon={<SearchIcon />} text="Some Text" />
</SideMenu>

Sidemenu :

import React from "react";
import PropTypes from "prop-types";

import {
  withStyles
} from "@material-ui/core";

import styles from "./styles";

class SideMenu extends React.Component {
  static propTypes = {
    classes: PropTypes.object.isRequired,
    children: PropTypes.any,
    // events
  };

  state = {

  }

  render() {
    const { children, classes } = this.props;

    return (
      <div className={classes.sideMenuRoot}>
        <div className={classes.sideMenuTabPane}>
        </div>

        <div className={classes.sideMenuContent}>
          {children}
        </div>
      </div>
    );
  }
}

export default withStyles(styles)(SideMenu);

Tab:

import React from "react";
import PropTypes from "prop-types";

class Tab extends React.Component {
  static propTypes = {};

  state = {};

  render() {
    const { text } = this.props;
    return (
      <h1>{text}</h1>
    )
  }
}

export default Tab;
58607083