返回 JSX 对象时添加新行答案

【问题标题】：Adding new lines when returning JSX object返回 JSX 对象时添加新行
【发布时间】：2017-12-22 10:50:42
【问题描述】：

您好，我有一些数据正在尝试渲染。我希望能够在使用 React 返回我的组件时正确呈现换行符。现在它只是将
、/n 或其他任何内容呈现为字符串。是否可以在我的数据中包含换行符，以便在我渲染数据时出现新行？

以下数据...

const imgPath = '/public/../../../img/';

const TempHelpData = [
    {
        name: 'testing',
        image: `${imgPath}boardAndCant.PNG`,
        subject: "1. yadda \<br \/> <br /> \n yadda",
        troubleshoot: "suggestions",
        video: "no video has been made for this subject"    
    },

    {
        name: 'one',
        image: `${imgPath}boardAndCant.PNG`,
        subject: "1. yadda yadda",
        troubleshoot: "suggestions",
        video: "no video has been made for this subject"
    },
]

export default TempHelpData;

渲染组件

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import TempHelpData from '../data/TempHelpData'
import sass from '../scss/application.scss'


class HelpFileContainerRender extends Component {

    render() {
        const renderHelpFile = this.props.data.filter(obj => {

            return this.props.name === obj.name;
                }).map((obj, idx) => {
                return (
                    <div key={idx}>
                        <div className="divImg">
                            <img src={`${obj.image}`} className="helpFileImg"></img>< br/>
                        </div>
                        <div>
                            <p>
                                <span>Name:</span> {obj.name} < br/>
                                <span>Subject:</span> {obj.subject} <br />
                                <span>Troubleshooting:</span> {obj.troubleshoot} <br />
                                <span>Video:</span> {obj.video} <br />
                            </p>
                        </div>
                    </div>
                );
        });

        return (
            <div>
                {renderHelpFile}
            </div>
        )
    }
}

class HelpFileContainer extends Component {
    render() {
        return (
            <div>
                <HelpFileContainerRender data={this.props.data} name={this.props.name} />
            </div>
        )
    }
}

HelpFileContainer.propTypes = {
    data: PropTypes.arrayOf(
        PropTypes.object
    ),
    name: PropTypes.string
}

HelpFileContainer.defaultProps = {
    data: TempHelpData,
    name: ''
}

export default HelpFileContainer;

【问题讨论】：

标签： reactjs newline render jsx

【解决方案1】：

您可以在数据中使用<br />，而不是使用\n，然后将其放入带有dangerouslySetInnerHTML 的jsx 中

<div dangerouslySetInnerHTML={{__html: 'hello <br /> goodbye' }} />

【讨论】：

什么是内容引用？我是否将危险的SetInnerHTML 放置到HelpFileContainer、HelpFileContainerDiv 或span？
类似于{__html: 'hello <br /> goodbye' }
不确定这有什么帮助。我正在尝试渲染数据对象并且不能放置静态 __html 除非它进入跨度范围内？？？