为什么我的嵌套 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

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

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

Answer 2

您需要在 ControlPanel

中渲染子项

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

Answer 3

要允许组件包含子项并正确渲染它们，您必须使用 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 因为它是一个函数组件）。

Answer 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（在所有组件中）。

Answer 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

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

Why won't my nested React components render?

javascript

reactjs

create-react-app

Containment