Visual Studio Code / React - 是否有可能在某处显示所有可能的道具？

Question

我有一个关于reactjs 和visual studio code 的问题。 我在问我，是否有可能在某个地方显示可以传递给组件的所有属性？

实际上我创建了一个组件Exhibition，它应该显示一个展览。 听起来很简单，但详细来说，有几种选择可以传递给展览。 可以是，一个单独的text 属性正在通过，有些展览只有一个stand，有些是stand 和一个hall 等。 我最后补充的，是展览的变化date。通常一个展览是一个月之内，但现在我有一个展览，从三月开始，到四月结束。所以我需要再次向组件添加更多属性。 因此，当我在代码中调用组件时，最好有一个概览，以查看所有可能的属性。

所以有点类似于C# 中的方法，其中所有参数（选项）都是可见的。

这是这个组件的代码：

import React, { Component } from 'react';
import Language from './Language.data';
import styled from 'styled-components';
import externalLinkImage from '../images/externalLink.svg';

require('bootstrap');

class Exhibition extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
        this.getMonthName = this.getMonthName.bind(this);
    }

    hoverOn() {
        document.getElementById(this.props.id).classList.add('opacity30');
        document.getElementById(this.props.id + "externalLinkImage").classList.add('displayBlock');
        document.getElementById(this.props.id + "externalLinkText").classList.add('displayBlock');
    }

    hoverOff() {
        document.getElementById(this.props.id).classList.remove('opacity30');
        document.getElementById(this.props.id + "externalLinkImage").classList.remove('displayBlock');
        document.getElementById(this.props.id + "externalLinkText").classList.remove('displayBlock');
    }

    getMonthName(monthNo) {
        let monthName;
        switch(monthNo)
        {
            case 1:
                monthName = Language[this.props.currentLanguage].january;
                break;
            case 2:
                monthName = Language[this.props.currentLanguage].february;
                break;
            case 3:
                monthName = Language[this.props.currentLanguage].march;
                break;
            case 4:
                monthName = Language[this.props.currentLanguage].april;
                break;
            case 5:
                monthName = Language[this.props.currentLanguage].may;
                break;
            case 6:
                monthName = Language[this.props.currentLanguage].june;
                break;
            case 7:
                monthName = Language[this.props.currentLanguage].july;
                break;
            case 8:
                monthName = Language[this.props.currentLanguage].august;
                break;
            case 9:
                monthName = Language[this.props.currentLanguage].september;
                break;
            case 10:
                monthName = Language[this.props.currentLanguage].october;
                break;
            case 11:
                monthName = Language[this.props.currentLanguage].november;
                break;
            case 12:
                monthName = Language[this.props.currentLanguage].december;
                break;
            default:
                break;
        }
        return monthName;
    }

    render() {
        let exhibitionImage = require('../images/exhibitions/' + this.props.exhibitionImage);
        const ExternalLink = styled.div`
            position:absolute;
            background-color:transparent;
            width:30px;
            height:30px;
            left:50%;
            top:50%;
            margin-left:-15px;
            margin-top:-15px;
            background-image: url(${externalLinkImage});
            background-position:center;
            background-size:contain;
            display:none;
        `
        const ExternalLinkText = styled.div`
            position:absolute;
            left:50%;
            top:50%;
            width:200px;
            height:30px;
            margin-left:-100px;
            margin-top:15px;
            display:none;
            color:#000;
        `

        const ExhibitionImage = styled.img`
            padding:50px;
        `

        let standText = (this.props.standOwner === undefined) ? Language[this.props.currentLanguage].meetUsOnOurStand : Language[this.props.currentLanguage].meetUsAt + " " + this.props.standOwner + " " + Language[this.props.currentLanguage].stand;
        let monthName;
        let startMonthName;
        let endMonthName;
        if(this.props.startMonth != undefined && this.props.endMonth != undefined) {
            startMonthName = this.getMonthName(this.props.startMonth);
            endMonthName = this.getMonthName(this.props.endMonth);
        }
        else {
            monthName = this.getMonthName(this.props.month);
        }
        return (
            <div>
                <div className="row" onMouseEnter={this.hoverOn.bind(this)} onMouseLeave={this.hoverOff.bind(this)}>
                    <div className="col-12">
                        <a href={this.props.linkUrl} rel="noopener noreferrer" target="_blank">
                            <ExhibitionImage id={this.props.id} src={exhibitionImage} className="img-fluid"></ExhibitionImage>
                            <ExternalLink id={this.props.id + "externalLinkImage"}></ExternalLink>
                            <ExternalLinkText id={this.props.id + "externalLinkText"}><small>{Language[this.props.currentLanguage].externalLink}</small></ExternalLinkText>
                        </a>
                    </div>
                </div>
                <div className="row">
                    <div className="col-12">
                        {
                            this.props.text !== undefined && this.props.text.length > 0 &&
                            <div>
                                {this.props.text}
                            </div>
                        }
                        {
                            (this.props.text === undefined || this.props.text.length === 0) &&
                            <div>
                                {
                                    !this.props.location &&
                                    standText + " " + this.props.stand
                                }
                                {
                                    this.props.location && 
                                    Language[this.props.currentLanguage].meetUsIn + " " + this.props.location
                                }
                                {
                                    this.props.hall != undefined && this.props.hall != null && 
                                    ", " + Language[this.props.currentLanguage].hall + " " + this.props.hall
                                }
                                <br />
                                {
                                    this.props.startMonth && this.props.endMonth && 
                                    this.props.startDay + " " + startMonthName + " - " + this.props.endDay + " " + endMonthName + " " + this.props.year
                                } 
                                {
                                    this.props.month && 
                                    this.props.days + " " + monthName + " " + this.props.year
                                }
                            </div>
                        }
                    </div>
                </div>
            </div>
        );
    }
}

export default Exhibition;

但也许这不是关于概述的问题，而是使用比我使用的更好的处理/编码方式... ;-)

Answer 1

您可以在返回组件之前将其添加到渲染函数中。

console.log(this.props);

Answer 2

你可以使用

componentDidMount() {
  console.log(this.props)
}