时间戳

首页 > 解决方案 > 仅当道具数据包含特定值时才呈现链接

javascript - 仅当道具数据包含特定值时才呈现链接

问题描述

我正在尝试将员工姓名链接到About页面上的简历。但是，有些人没有简历。a如果我的 JSON 文件中没有填写 CV PDF，我想删除名称上的标签/链接。我知道如何在 React 之外执行此操作，我只是不确定 javascript 何时需要在渲染而不是返回区域中，因为我已经设置了我的信息。

import React, { Component } from 'react';
import Image from 'react-image-resizer';
import '../styles/PersonCard.css';


class PersonCard extends Component {

  render() {
    return (
      <div className="card-container">
        <div className="card">
          <div className="side">
            <Image 
              className="card-img-top"
              src={process.env.PUBLIC_URL + "/images/bios/" + this.props.data.img_name}
              height={249}
              width={249} 
            />
          </div>
          <div className="card-body">
            <a href={process.env.PUBLIC_URL + "/pdfs/" + this.props.data.pdf}>
              <h5 className="card-title">
                {this.props.data.name + " " + this.props.data.credentials}
              </h5>
            </a>
            <h6 className="card-text">{this.props.data.position}</h6>
            <p className="card-text">{this.props.data.email}</p>
            <p className="card-text">{this.props.data.phone}</p>
          </div>
        </div>
      </div>
    );
  }
}

export default PersonCard;

PS JSON以这种格式设置：

{
    "name": "John Smith",
    "credentials": "PhD",
    "position": "Professor",
    "email": "jsmith@uni.edu",
    "phone": "123-456-7890",
    "designations": [
        "Faculty"
    ],
    "img_name": "JohnSmith.jpg",
    "pdf": "jSmithCV.pdf"

}

标签： javascriptreactjs

解决方案

在我看来，最简单的方法是创建一个额外的组件来渲染它的子组件：

const CVComponent = ({ children, pdf }) => pdf ? (
  <a href={process.env.PUBLIC_URL + "/pdfs/" + pdf}>
    {children}
  </a>
) : <div>{children}</div>;

然后你可以像这样使用它：

class PersonCard extends Component {

  render() {
    return (
      <div className="card-container">
        <div className="card">
          <div className="side">
            <Image 
              className="card-img-top"
              src={process.env.PUBLIC_URL + "/images/bios/" + this.props.data.img_name}
              height={249}
              width={249} 
            />
          </div>
          <div className="card-body">
            <CVComponent pdf={this.props.data.pdf}>
              <h5 className="card-title">
                {this.props.data.name + " " + this.props.data.credentials}
              </h5>
            </CVComponent>
            <h6 className="card-text">{this.props.data.position}</h6>
            <p className="card-text">{this.props.data.email}</p>
            <p className="card-text">{this.props.data.phone}</p>
          </div>
        </div>
      </div>
    );
  }
}

推荐阅读