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

IT技术 javascript reactjs create-react-app
2021-03-31 02:32:08

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

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

5个回答

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

遏制

一些组件提前不知道他们的孩子。这对于像Sidebar或Dialog代表通用“盒子”的组件尤其常见。

我们建议此类组件使用特殊childrenprops将子元素直接传递到它们的输出中：

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因为它是一个函数组件）。

只是说，“这个。” 不需要不是因为它是一个无状态组件，不需要它是因为它是一个函数而不是一个类，类也可以是无状态的。
2021-06-06 02:32:08
@PabloMáximo 我认为这只是我的脑残。谢谢楼上，更新了。
2021-06-10 02:32:08

您可以通过 props 访问嵌套元素。因此，在您的情况下，请执行以下操作：

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

你需要让孩子们在 ControlPanel

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

你的 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'));

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

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

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

其它你可能感兴趣的问题
上一篇React.render 替换容器而不是插入 下一篇未捕获的类型错误：this.state.data.map 不是函数