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

Question

我的反应元件出问题了。我的组件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。这将传递给以子组件作为支柱的所有组件，并包含组件的子组件，正如反应文件所解释的那样

安全壳 一些组件不知道他们的孩子提前。这对于表示通用“方框”的Sidebar或Dialog这样的组件尤其常见。 我们建议这些组件使用特殊的支柱将子元素直接传递到它们的输出中： 函数FancyBorder(props) {返回( {props.children} )；} 这允许其他组件通过嵌套JSX将任意子组件传递给它们。 函数WelcomeDialog() {返回(欢迎您访问我们的航天器！)；}

正如文档中所描述的，有些组件不知道它们的子组件--它们可能是通用包装器或内容框，这就是您的ControlPanel。因此，要呈现组件的子组件，必须在父级的children方法中显式地呈现来自render支柱的子元素。因此，这样将其应用于您的代码：

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

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

Answer 2

您可以通过道具访问嵌套元素。所以，在你的例子中，这样做：

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

Answer 3

您需要在ControlPanel中呈现孩子

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