返回JSX對象時添加新行

你好，我有一些數據，我試圖渲染出來。我希望在使用React返回組件時能夠正確渲染換行符。現在它只呈現
，/ n或其他任何字符串。是否可以在我的數據中包含換行符，這樣當我將數據渲染出新行時會發生？返回JSX對象時添加新行

以下數據...

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;

來源

2017-07-17 user3622460

而不是使用\ N，你可以使用數據<br />，然後把它放在JSX與dangerouslySetInnerHTML

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

來源

2017-07-17 19:33:38

什麼是內容引用？我是否危險地將SetInnerHTML設置爲HelpFileContainer，HelpFileContainerDiv或跨度？ – user3622460

這將是像'{__html：'你好
再見'}' –

不知道這是如何有幫助。我試圖渲染出數據對象，並且不能放置靜態__html，除非它進入跨度內??? – user3622460

返回JSX對象時添加新行

回答

相關問題