Javascript props.children在每个子对象上使用父容器进行渲染

我正在尝试创建一个侧菜单，它接收子菜单并呈现它们。侧菜单确实渲染子菜单，但每个子菜单都被包装在侧菜单的所有渲染输出中。我找不到办法阻止这一切的发生

我尝试过不使用样式的材质UI，但同样的情况也发生了

这就是它如何使用基本渲染、使用

返回{This.props.children}

或下面的代码输出的

守则：

主页

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

---

不要认为您需要执行所有renderChildren函数。以前做过这样的事情应该只需要通过{children}

主页：

<SideMenu>
    <Tab id="Search" header="Search" icon={<SearchIcon />} text="Some Text" />
    <Tab  id="home" header="Home" icon={<SearchIcon />} text="Some Text" />
</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);

从“React”导入React；
从“道具类型”导入道具类型；
进口{
风格
}来自“@材料界面/核心”；
从“/styles”导入样式；
类侧菜单扩展了React.Component{
静态类型={
类：PropTypes.object.isRequired，
孩子们：任何人，
//事件
};
状态={
}
render（）{
const{children，classes}=this.props；
返回(
{儿童}
);
}
}
导出默认样式（样式）（侧菜单）；

选项卡：

从“React”导入React；
从“道具类型”导入道具类型；
类选项卡扩展了React.Component{
静态propTypes={}；
状态={}；
render（）{
const{text}=this.props；
返回(
{text}
)
}
}
导出默认选项卡；

我想您的选项卡组件应该首先与文本/图标或任何其他回调等所有道具一起呈现。在此之后，您只需在侧菜单组件中调用props.children即可。这不会产生任何问题。我还试图将其他子项传递到每个选项卡中，而不仅仅是令人遗憾的文本。@Kennyist什么样的事情？所有标签都会使用它们吗？可以建立在您拥有的选项卡组件上，并将信息传递给他们，可以解决您的问题。

<SideMenu>
    <Tab id="Search" header="Search" icon={<SearchIcon />} text="Some Text" />
    <Tab  id="home" header="Home" icon={<SearchIcon />} text="Some Text" />
</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);

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;