试图在反应中的文本之间添加 br 标签答案

【问题标题】：trying to add br tag between the text in react试图在反应中的文本之间添加 br 标签
【发布时间】：2017-04-14 05:15:25
【问题描述】：

我正在尝试在反应中的文本之间添加 br 标记。你们能告诉我如何添加它。我尝试添加 br 标签......但如果我添加，我会在浏览器中获得
标签。在下面提供我的代码。你们能告诉我如何解决它吗？

let sportsDescription = '';

        if(sportsInfo !== '' && !isSportsSetupActive) {
            sportsDescription = 'testing <br /> testing';

        }else if(isSportsSetupActive) {
            sportsDescription = 'testing <br /> testing';

        }



        return (
            <div id="main" className="section flex-container flex-full">
                <section className="page-content flex-item">
                    <section className="gray-box">
                        <h2>Welcome to your  dashboard{formatName}.</h2>
                        <p className="ft-intro ft-day1 ft-day2">{sportsDescription}</p>

                    </section>
                </section>
            </div>
    );

【问题讨论】：

标签： javascript jquery html reactjs redux

【解决方案1】：

JSX 只是看起来像 HTML。 JSX 只是 Javascript 的语法扩展，其中每个 JSX“标签”实际上是对 React.createElement 函数的调用。因此，您不能将 JSX 视为 HTML，因此您不能简单地使用带有 HTML 的字符串并期望它们像 DOM 一样工作。你应该做的是返回其他有效的 JSX：

    let sportsDescription = '';

    if(sportsInfo !== '' && !isSportsSetupActive) {
        sportsDescription = (
            <span>testing<br />testing</span>
        );
    } else if(isSportsSetupActive) {
        sportsDescription = (
            <span>testing<br />testing</span>
        );
    }

    return (
        <div id="main" className="section flex-container flex-full">
            <section className="page-content flex-item">
                <section className="gray-box">
                    <h2>Welcome to your  dashboard{formatName}.</h2>
                    <p className="ft-intro ft-day1 ft-day2">{sportsDescription}</p>
                </section>
            </section>
        </div>
);

这里，

<span>testing<br />testing</span>

实际上是对React.createElement的四个调用，第一个是针对span元素，另外三个是针对它的子元素：文本节点、br、文本节点。

请谨慎read the documentation。

【讨论】：

【解决方案2】：

来自ReactJS Docs...

一般来说，从代码中设置 HTML 是有风险的，因为很容易在不经意间将您的用户暴露给跨站点脚本 (XSS) 攻击。所以，你可以直接从 React 中设置 HTML，但你必须输入 dangerouslySetInnerHTML 并使用 __html 键传递一个对象，以提醒自己这是危险的。

在您的示例中，{sportsDescription} 被解释为字符串。 React 不会将该变量内的任何内容视为 DOM 元素。这就是为什么您的 <br/> 仅呈现为字符串的原因。

或者，您可以这样做（但这通常是个坏主意）...

 <p 
   className="ft-intro ft-day1 ft-day2" 
   dangerouslySetInnerHTML={{__html:sportsDescription}} 
 />

这样，React 正确识别了您在字符串 sportsDescription 中包含 HTML 的意图，并呈现所需的 <br/> 元素。

这是一篇文章的引述，其中更详细地介绍了Getting Started with ReactJS：

React 模块有一个 createClass 方法，它接受一个对象作为它的唯一参数。我们只定义一个键开始：渲染。 render 的值是一个返回虚拟 DOM 元素的函数。 React 性能的关键之一是它的虚拟 DOM 抽象。本质上，它是一个差异引擎，计算现有 DOM 和要渲染的 DOM 之间的差异，并且只修改必要的元素和属性。在渲染函数中，您可能已经注意到我包含了 HTML 标记。这就是 JSX。它不会作为合法的 Javascript 通过验证。相反，它需要 Babel 转译器。

【讨论】：