为什么我的嵌套React组件不渲染？

小编典典

为什么我的嵌套React组件不渲染？

reactjs

我的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（在ControlPanelindex.jsx文件中）

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

阅读 326

2020-07-22

共1个答案

小编典典

要允许组件包含子项并正确渲染它们，必须使用this.props.children。这是传递到所有组件与孩子为道具，包含组件的孩子，通过解释的阵营文档：

遏制

有些组件不提前知道他们的孩子。这对于像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所需要的。因此，要渲染组件的子代，必须children在父代的render方法中显式渲染prop中的子代。因此，将它像这样应用于您的代码：

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

注意如何props.children渲染（不是this.props.children因为它是一个功能组件）。

2020-07-22