我的React组件有问题。我组件的嵌套子代ControlPanel似乎没有渲染。这是我的代码:
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);
我努力了:
CustomerDisplay
我知道嵌套组件是可能的。我已经看到了。由于某种原因,它对我不起作用。
要允许组件包含子项并正确渲染它们,必须使用this.props.children。这是传递到所有组件与孩子为道具,包含组件的孩子,通过解释的阵营文档:
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> ); }
有些组件不提前知道他们的孩子。这对于像Sidebar或Dialog代表通用“框”的组件尤为常见。
Sidebar
Dialog
我们建议此类组件 使用特殊children道具将子元素直接传递到它们的输出中:
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中的子代。因此,将它像这样应用于您的代码:
render
const ControlPanel = (props) => { return ( <div className="control_panel" id="control_panel"> {props.children} </div> ); }
注意如何props.children渲染(不是this.props.children因为它是一个功能组件)。
props.children