为什么我的嵌套 React 组件不呈现？

Question

我的 React 组件有问题。我组件的嵌套子组件 ControlPanel 似乎没有渲染。这是我的代码：

 class App extends Component {
  render() {
    return (
      <div className="App">
        <ControlPanel>
          <CustomerDisplay />
        </ControlPanel>
      </div>
    );
  }
}

我在这个文件的顶部有以下两行：

 import ControlPanel from './components/control_panel';

import CustomerDisplay from './components/customer_display';

这是我的 ControlPanel 组件：

 import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './styles.scss';

const ControlPanel = () => {
    return (
      <div className="control_panel" id="control_panel">

      </div>
    );
}

export default CSSModules(ControlPanel, styles);

我努力了：

• 将组件作为完整的 HTML 标记调用（打开和关闭）
• 将 CustomerDisplay 组件嵌套在 ControlPanel 组件中（在 ControlPanel 的 index.jsx 文件中）

我知道嵌套组件是可能的。我已经看到它完成了。出于某种原因，它对我不起作用。

原文由 MddHtt13 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要允许组件包含子组件并正确渲染它们，您必须使用 this.props.children 。这作为 prop 传递给所有带有子组件的组件，并包含组件的子组件，如 React 文档 所述：

遏制

一些组件提前不知道他们的孩子。这对于 Sidebar 或 Dialog 代表通用“盒子”的组件尤其常见。

我们建议此类组件 使用特殊的 children 属性将子元素直接传递到它们的输出中：

>  function FancyBorder(props) {
>     return (
>       <div className={'FancyBorder FancyBorder-' + props.color}>
>         {props.children}
>       </div>
>     );
> }
>
> ```
>
> 这允许其他组件通过嵌套 JSX 将任意子组件传递给它们
>
> ```
> function WelcomeDialog() {
>     return (
>       <FancyBorder color="blue">
>         <h1 className="Dialog-title">
>           Welcome
>         </h1>
>         <p className="Dialog-message">
>           Thank you for visiting our spacecraft!
>         </p>
>       </FancyBorder>
>     );
> }
>
> ```

如文档中所述，某些组件提前不知道它们的子组件——它们可能是通用的包装器或不同内容的盒子，这就是你的 `ControlPanel` 是什么。因此，要渲染组件的子组件，您必须在父组件的 `render` `children` 方法中显式渲染来自 \-\-\- 道具的子组件。因此，像这样将它应用于您的代码：

const ControlPanel = (props) => { return (

{props.children}

); }

”`

注意 props.children 是如何呈现的（不是 this.props.children 因为它是一个函数组件）。

原文由 Andrew Li 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以通过道具访问嵌套元素。所以在你的情况下这样做：

 const ControlPanel = (props) => {
  return (
    <div className="control_panel" id="control_panel">
      {props.children}
    </div>
  );
}

原文由 kurumkan 发布，翻译遵循 CC BY-SA 3.0 许可协议