javascript - react js。如何制作具有这种结构的组件: description of the component

Question

我有以下代码。我无法理解应如何实现 ProjectCardDescription 组件，以便能够在 ProjectCard 组件中传递其描述

我尝试过这个，但得到一个空组件:

import React, { Component } from 'react';

class ProjectCardDescription extends Component {
    render () {
        return (
            <span>
                {this.props.description}
            </span>
        );
    }
}

export default ProjectCardDescription; 

这就是我的 ProjectCard 组件的样子:

import React, { Component } from 'react';
import ProjectCardIcon from './ProjectCardIcon/ProjectCardIcon';
import './ProjectCard.css';
import ProjectCardDescription from './ProjectCardDescription/ProjectCardDescription';

class ProjectCard extends Component {        
    render() {
        return(
            <div className="project-card project-card-medium">
                <a href="https://www.linkedin.com/in/florovarelaa/" target="_blank" rel="noopener noreferrer">
                    <ProjectCardIcon icon='react'/> 
                    <ProjectCardDescription>
                        Una descripcion de un projecto hecho en react. Que contiene dos oraciones.
                    </ProjectCardDescription>
                </a>
            </div>
        );
    };      
}
export default ProjectCard;

我想获取 ProjectCardDescription 组件及其属性在 html 里面。我应该将它作为 Prop 传递吗？

Answer 1

如果您想使用现有的结构:

<ProjectCardDescription>
  Una descripcion de un projecto hecho en react. Que contiene dos oraciones.
</ProjectCardDescription>

您的 ProjectCardDescription 组件应如下所示:

class ProjectCardDescription extends Component {
    render () {
        return (
            <span>
                {this.props.children}
            </span>
        );
    }
}

this.props.children 是渲染组件的开始标签和结束标签之间的任何内容。

文档 here