javascript - 为什么我的嵌套 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 文件中)

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

Answer 1

要允许组件包含子项并正确渲染它们，您必须使用 this.props.children。这作为 prop 传递给所有带有子组件的组件，并包含组件的子组件，如 the React documentation 所解释的那样。 :

Containment

Some components don't know their children ahead of time. This is especially common for components like Sidebar or Dialog that represent generic "boxes".

We recommend that such components use the special children prop to pass children elements directly into their output:

function FancyBorder(props) {
    return (
      <div className={'FancyBorder FancyBorder-' + props.color}>
        {props.children}
      </div>
    );
}

This lets other components pass arbitrary children to them by nesting the 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 (
      <div className="control_panel" id="control_panel">
        {props.children}
      </div>
    );
}

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