小编典典

为什么我的嵌套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文件中)

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


阅读 322

收藏
2020-07-22

共1个答案

小编典典

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

遏制

有些组件不提前知道他们的孩子。这对于像SidebarDialog代表通用“框”的组件尤为常见。

我们建议此类组件 使用特殊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