React条件渲染逻辑调整：如何修改MyTitle组件的渲染规则？

实现方案 #

你需要做三处核心调整即可满足需求，修改后的完整代码如下：

import React from 'react';
import PropTypes from 'prop-types';

const MyTitle = (props) => {
  const { title, link } = props;

  return (
    <div className="title-wrapper">
      {title && (
        <h2 data-text={title}>
          {link ? (<a href={link} title={title}>{title}</a>) : (<span>{title}</span>)}
        </h2>
      )}
    </div>
  );
};

MyTitle.propTypes = {
  title: PropTypes.string,
  link: PropTypes.string,
};

MyTitle.defaultProps = {
  title: '',
  link: '',
};

export default MyTitle;

调整说明 #

• 把title-wrapper类的div从原来的title条件判断分支移到最外层，保证无论title是否存在，这个容器都会正常渲染，也方便你后续给空容器加占位样式
• 把h2的渲染逻辑放到div内部，用&&短路运算做条件渲染，仅当title为真值（非空字符串、非undefined等）时才渲染h2及其内部内容
• 修正PropTypes配置：移除了原来title的isRequired必填校验，同时给title新增默认值为空字符串，避免未传prop时出现类型警告

内容的提问来源于stack exchange，提问作者user1941537