如何在React Toastify中传递变量？实例问题求助

嘿，这个问题我熟～你之所以看到提示框显示"msg"而非变量值，是因为你把变量名当成字符串直接写在JSX里啦！React会把引号包裹的内容当作纯文本渲染，自然不会解析变量。下面给你几种正确的解决方案：

1. 基础用法：正确引用变量 #

直接用{}包裹变量，让React识别这是一个变量而非字符串：

import { toast } from 'react-toastify';

const msg = 'Hello World.<br/>This is awesome.<br/>Be Happy';
// 这里用{}包裹msg，而不是直接写msg
toast.error(<div>{msg}</div>);

不过这里有个小细节：你的msg里包含<br/>标签，直接这么写的话，React会把它当成纯文本显示出来（也就是你会看到<br/>字样，而不是换行）。如果想要实现换行效果，看下面两种处理方式：

2. 解析HTML标签（快速实现换行） #

如果确定msg的内容是安全的（比如不是用户输入的内容），可以用dangerouslySetInnerHTML让React解析HTML标签：

toast.error(<div dangerouslySetInnerHTML={{ __html: msg }} />);

⚠️ 注意哦：这个方法叫"dangerously"是有原因的，如果内容来自用户输入，可能会有XSS攻击风险，一定要谨慎使用！

3. 安全拼接React元素（推荐） #

不想冒XSS风险的话，我们可以把字符串拆分后用React元素拼接：

import React from 'react';
import { toast } from 'react-toastify';

const msg = 'Hello World.<br/>This is awesome.<br/>Be Happy';
// 按<br/>分割字符串
const msgSegments = msg.split('<br/>');

toast.error(
  <div>
    {msgSegments.map((segment, idx) => (
      <React.Fragment key={idx}>
        {segment}
        {/* 最后一段不要加<br/> */}
        {idx !== msgSegments.length - 1 && <br />}
      </React.Fragment>
    ))}
  </div>
);

这种方式完全通过React的方式渲染内容，安全又可靠，适合大多数场景。

核心总结一下：在JSX中引用变量必须用{变量名}的形式，而不是直接写变量名～根据内容是否包含HTML标签，选择对应的渲染方式就好啦！

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