React中如何结合使用return、JS与HTML？及截断文本加粗实现

一、React里return语句中JS与HTML的结合方式 #

React依赖JSX语法实现JS与HTML的无缝结合，核心使用规则如下：

• 嵌入JS逻辑：用{}包裹变量、函数调用或表达式，直接插入到类HTML的结构中
• 条件渲染：在JSX内使用三元运算符、逻辑与(&&)等实现分支渲染
• 多元素返回：若需返回多个同级元素，用<>（Fragment）或容器标签（如<div>）包裹

举几个实用示例：

1. 嵌入变量

function UserCard({ name, age }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>年龄：{age}</p>
    </div>
  );
}

2. 条件渲染

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>欢迎回来！</p> : <p>请登录</p>}
    </div>
  );
}

3. 函数生成动态内容

function getOnlineStatus(isOnline) {
  return isOnline ? <span style={{ color: 'green' }}>在线</span> : <span style={{ color: 'red' }}>离线</span>;
}

function UserStatus({ isOnline }) {
  return <div>状态：{getOnlineStatus(isOnline)}</div>;
}

二、修改文本截断函数实现加粗的"read more" #

你原函数返回的是纯字符串，无法直接添加样式。在React中需返回JSX元素才能实现样式效果，修改后的代码如下：

const truncateString = (str, num) => {
  // 处理str为null/undefined的边界情况
  const content = str || '';
  if (content.length > num) {
    // 用Fragment包裹避免生成额外DOM节点
    return (
      <>
        {content.slice(0, num)}
        <span style={{ fontWeight: 'bold' }}> ...read more</span>
      </>
    );
  }
  return content;
};

组件中使用方式 #

在组件的return语句里直接调用该函数，用{}包裹即可：

function Description({ text }) {
  return <p>{truncateString(text, 50)}</p>;
}

补充优化 #

如果偏好CSS类而非内联样式，可替换为：

<span className="read-more"> ...read more</span>

然后在CSS文件中定义样式：

.read-more {
  font-weight: bold;
}

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