ReactJS TypeScript MUI Alert中如何将href文本转为可点击链接

你的问题核心是React会自动转义字符串中的HTML标签，导致带<a>的内容被当成纯文本显示，无法解析成可点击链接。以下是几种可行的解决方法：

方法1：用React元素存储消息（推荐） #

将message状态定义为React节点类型，直接存入JSX内容，让React正常解析渲染：

import * as React from 'react';
import { useState } from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import { Alert} from '@mui/material';
import Typography from '@mui/material/Typography';

export default function BasicAlerts() {
  // 定义message为React节点类型
  const [message, setMessage] = useState<React.ReactNode>('Form Loaded');

  const handleLinkClick = () => {
    // 直接设置JSX元素
    setMessage(
      <>
        changed : 
        <a href="https://www.google.com" target="_blank" rel="noopener noreferrer">
          Visit Google
        </a>
      </>
    );
  };

  return (
    <Stack sx={{ width: '100%' }} spacing={2}>
      <Alert variant="outlined" severity="info">
        This is an info alert — check it out!
        <Typography>
          <br/>
          {message}
          <br/>
        </Typography>
      </Alert>
      <Button onClick={handleLinkClick}>Change</Button>
    </Stack>
  );
}

方法2：使用MUI官方Link组件（贴合MUI生态） #

如果想要链接样式和MUI主题统一，用MUI的Link组件替代原生<a>标签：

import * as React from 'react';
import { useState } from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import { Alert} from '@mui/material';
import Typography from '@mui/material/Typography';
// 引入MUI Link组件
import Link from '@mui/material/Link';

export default function BasicAlerts() {
  const [message, setMessage] = useState<React.ReactNode>('Form Loaded');

  const handleLinkClick = () => {
    setMessage(
      <>
        changed : 
        <Link href="https://www.google.com" target="_blank" rel="noopener noreferrer">
          Visit Google
        </Link>
      </>
    );
  };

  return (
    <Stack sx={{ width: '100%' }} spacing={2}>
      <Alert variant="outlined" severity="info">
        This is an info alert — check it out!
        <Typography>
          <br/>
          {message}
          <br/>
        </Typography>
      </Alert>
      <Button onClick={handleLinkClick}>Change</Button>
    </Stack>
  );
}

方法3：使用dangerouslySetInnerHTML（不推荐，有安全风险） #

如果必须用HTML字符串形式，可通过dangerouslySetInnerHTML强制解析，但注意：仅在内容完全可控时使用，若包含用户输入可能引发XSS攻击：

import * as React from 'react';
import { useState } from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import { Alert} from '@mui/material';
import Typography from '@mui/material/Typography';

export default function BasicAlerts() {
  const [message, setMessage] = useState('Form Loaded');

  const handleLinkClick = () => {
    // 直接写正常的HTML字符串，无需转义标签
    const u = '<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Visit Google</a>';
    setMessage("changed : " + u);
  };

  return (
    <Stack sx={{ width: '100%' }} spacing={2}>
      <Alert variant="outlined" severity="info">
        This is an info alert — check it out!
        <Typography dangerouslySetInnerHTML={{ __html: message }}>
        </Typography>
      </Alert>
      <Button onClick={handleLinkClick}>Change</Button>
    </Stack>
  );
}

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