为什么我的嵌套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's index.jsx文件中)

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

Answer 1

要允许组件包含子项并正确呈现它们,您必须使用this.props.children.这将传递给所有具有子项作为prop的组件,并包含组件的子项,如React文档所述:

遏制

有些组件提前不了解自己的孩子.这对于像Sidebar或Dialog代表通用"盒子"的组件尤其常见.

我们建议这些组件使用特殊childrenprop将子元素直接传递给它们的输出:

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.因此,要渲染组件的子项,必须children在父render方法中显式地从prop中渲染子项.因此,将它应用于您的代码:

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

注意如何props.children渲染(不是this.props.children因为它是一个函数组件).