使用 添加 `title` 属性换行符 到 JSX 元素

IT技术 javascript html reactjs
2022-07-28 23:56:58

title我知道我可以使用 向 HTML 属性添加换行符
,但 React 对此进行了转义。

例如,这是一个 React 组件,其中包含一个标准的、非 React 处理的title属性,该属性包含一个换行符......

在此处输入图像描述

并且可以在浏览器中看到效果...

在此处输入图像描述

但是如果 React 正在处理该title属性...

在此处输入图像描述

...然后这是输出...

在此处输入图像描述

浏览器控制台显示这已被转义...

在此处输入图像描述

如何编写仍然包含
在输出中的 JSX 元素?title或者有没有其他方法可以为 JSX 元素的属性添加换行符?


更新

我发现如果属性由 React 处理,\n则会添加换行符,而对于相同的属性则进行转义。但是,在 React 未处理的属性中使用只会输出“\n”——在这些情况下,我仍然必须使用.title
title\ntitle


1个回答

这不是特定于react的事情,javasricpt 会看到string你可以使用 new line Charterer \n,如果它通过react它仍然不起作用,因此你可以通过在编译时编码以另一种方式逃避它,并解码在运行时达到预期的效果。这是在 react 中使用encodeURI的演示:

// %0A is URI encoded of newline character
// fellan bisar will be shown in two lines

function App() {
    return (
     <p title={decodeURI("fellan%0Abisar")}>
       behman bisar fellan ....  
     </p>
     )
}

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>


下面的代码片段是 javascript 中的演示:

fail.title = "fellan &#10; bisar";

success.title = decodeURI("fellan %0A bisar");
<p id="fail">fellan bisar bahman</p>

<p id="success">bahman bisar fellan</p>