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

Question

我知道我可以使用
为 HTML title属性添加换行符 ，但 React 逃脱了这一点。

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

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

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

...那么这是 output...

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

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

---

更新

我发现如果title属性由 React 处理， \n将添加一个换行符，而
 为相同的title属性转义。 但是，在 React未处理的title属性中使用\n只会输出 "\n" - 在这些情况下，我仍然必须使用
 .

Answer 1

这不是特定于反应的事情，javasricpt 将看到作为string ，您可以使用换行符\n ，如果它通过反应仍然不起作用，因此您可以在编译时通过编码以另一种方式对其进行转义，并在运行时解码以达到预期的效果。 这是在 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 
 bisar"; success.title = decodeURI("fellan %0A bisar");

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