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。我应该把它当作道具吗？

Answer 1

您没有向组件传递description道具。这是通过（看起来像）HTML属性完成的，如下所示：

<ProjectCardDescription description="my description here" />

还请注意，这就是您所需要的，您不需要（或不需要）内部的结束标记和内容。该组件的render方法告诉它如何将道具转换为其内部内容。

Answer 2

如果要使用结构，则可以：

<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

React js。如何使用这种结构制作组件：<component>组件说明</component>

2 个答案: