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

【问题标题】：Why won't my nested React components render?为什么我的嵌套 React 组件不会渲染？
【发布时间】：2017-04-30 23:39:27
【问题描述】：

我的 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 文件中）

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

【问题讨论】：

标签： javascript reactjs create-react-app

【解决方案1】：

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

遏制

有些组件不提前知道他们的孩子。这对于像 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 (
      <div className="control_panel" id="control_panel">
        {props.children}
      </div>
    );
}

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

【讨论】：

只是说，“这个。”不需要不是因为它是一个无状态的组件，它不是因为它是一个函数而不是一个类，类也可以是无状态的。
@PabloMáximo 我认为这只是我的脑残。感谢您的提醒，已更新。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

你需要渲染ControlPanel中的孩子

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

【讨论】：

【解决方案4】：

您的 App.js（我知道这是您的 JSX 索引）应该是：

import React from 'react';
import ReactDOM from 'react-dom';

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


ReactDOM.render(<App/>, document.getElementById('YOUR_ROOT_ID'));

尝试在class 之前添加export default（在所有组件中）。

【讨论】：

【解决方案5】：

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

export default function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
        <h1 className="Dialog-title">
           Welcome
        </h1>
        <p className="Dialog-message">
           Thank you for visiting our spacecraft!
        </p>
    </FancyBorder>
  );
}

<FancyBorder>JSX 标签内的任何内容都会作为childrenprop 传递到FancyBorder 组件中。由于 FancyBorder 在 <div> 内呈现 {props.children}，因此传递的元素出现在最终输出中。

这是我一直在关注的，在这里查看 https://reactjs.org/docs/composition-vs-inheritance.html

【讨论】：