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

Question

我试图在反应中的文本之间添加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>
    );

Answer 1

来自ReactJS文档 ......

通常,从代码设置HTML是有风险的,因为很容易无意中将您的用户暴露给跨站点脚本(XSS)攻击.因此,您可以直接从React设置HTML,但是您必须键入dangerouslySetInnerHTML并使用__html键传递对象,以提醒自己这很危险.

在您的示例中,{sportsDescription}被解释为字符串.React不会在该变量中看到任何内容作为DOM元素.这就是为什么你<br/>只能以字符串形式呈现的原因.

或者,你可以这样做(但这通常是一个坏主意)......

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

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

以下是一篇文章的引用,该文章详细介绍了ReactJS入门:

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