Question

您好我有一些我试图渲染的数据。我希望能够使用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;

Answer 1

您可以在数据中使用<br />，而不是使用\ n，然后使用dangerouslySetInnerHTML

将其放入jsx中

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

返回JSX对象时添加新行

1 个答案: