ReactJS：从.map中导入的数据字符串中渲染html

问题描述

ReactJS的新功能。我正在映射数据数组，其中一些是带有HTML标签的字符串。我试图弄清楚如何呈现html，以便它能正常工作。当前，它在浏览器中以字符串形式输出。

数据：

const PROJECTS = [
  {
    id: 1,title: 'Website',dates: 'December 2015 - December 2017',description: 'Did some freelance work for <a href="www.website.com">website.com</a>.',},{
    id: 2,}
];

export default PROJECTS;

反应成分

import React,{ Component } from 'react';
import PROJECTS from '../data/projects';

class Projects extends Component {
  render() {
    return (
      
          <div>
            {PROJECTS.map(PROJECT => {
              return(
                <article key={PROJECT.id}>
                  <h2>{PROJECT.title}</h2>
                  <p>{PROJECT.dates}</p>
                  <p>{PROJECT.description}</p>
                </article>
              )
            })}
          </div>

    )
  }
}

export default Projects;

解决方法

更改您的Projects，以使HTML改为由JSX组成：

import React from 'react';
const PROJECTS = [
  {
    id: 1,title: 'Website',dates: 'December 2015 - December 2017',description: <>Did some freelance work for <a href="www.website.com">website.com</a>.</>,},{
    id: 2,}
];

他们<p>{PROJECT.description}</p>（您已经拥有）将呈现JSX。

（即使您没有创建组件，也需要导入React-因为这需要JSX，而JSX需要React.createElement，因此需要进行React导入）

,

有一个支持可见html标签的道具：dangerouslySetInnerHTML

示例：

const PROJECTS = [
    {
        id: 1,description: 'Did some freelance work for <a href="www.website.com">website.com</a>.'
    },{
        id: 2,dates: 'December 20' +
            '15 - December 2017',description: 'Did some freelance work for <a href="www.website.com">website.com</a>.'
    }
];


class Projects extends Component {
    render() {
        return (

            <div>
                {PROJECTS.map(PROJECT => {
                    return(
                        <article key={PROJECT.id}>
                            <h2>{PROJECT.title}</h2>
                            <p>{PROJECT.dates}</p>
                            <p dangerouslySetInnerHTML={{ __html:PROJECT.description}}></p>
                        </article>
                    )
                })}
            </div>

        )
    }
}

,

Without using any third party library use `dangerouslySetInnerHTML` but you have to be sure you get valid html in the response everytime

return (
    <div>
        {PROJECTS.map(PROJECT => {
            return (
                <article key={PROJECT.id}>
                    <h2>{PROJECT.title}</h2>
                    <p>{PROJECT.dates}</p>
                    <p dangerouslySetInnerHTML={{ __html: PROJECT.description }}></p>
                </article>
            )
        })}
    </div>
)

,

一个选项正在使用react-html-parser库https://www.npmjs.com/package/react-html-parser，它将避免使用function combineArrays(arrA,arrB) { let combined = []; while (arrA.length != 0 || arrB.length != 0) { if (arrA.length != 0) { combined.push(arrA.shift()); } if (arrB.length != 0) { combined.push(arrB.shift()); } } return combined; } console.log(combineArrays(['a','b','c'],[1,2,3,4]));。这也意味着，例如，如果数组直接来自API，则无需进行操作（但无论如何总是对它进行消毒始终是个好习惯）。

更新后的代码如下：

dangerouslySetInnerHTML