ReactJS：從 .map 中導入的數據字符串渲染 html

Question

ReactJS 的新手。 我正在映射一組數據，其中一些是帶有 HTML 標簽的字符串。 我試圖弄清楚如何呈現 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,
    title: 'Website',
    dates: 'December 2015 - December 2017',
    description: 'Did some freelance work for <a href="www.website.com">website.com</a>.',
  }
];

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;

Answer 1

更改您的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,
    title: 'Website',
    dates: 'December 2015 - December 2017',
    description: <>Did some freelance work for <a href="www.website.com">website.com</a>.</>,
  }
];

他們， <p>{PROJECT.description}</p> - 你已經擁有 - 將渲染 JSX。

（您確實需要導入 React，即使您沒有創建組件 - 因為這需要 JSX，而 JSX 需要 React.createElement，所以需要導入 React）

Answer 2

有一個可見 html 標簽的道具： dangerouslySetInnerHTML

例子：

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,
        title: 'Website',
        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>

        )
    }
}

Answer 3

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>
)

Answer 4

一個選項是使用 react-html-parser 庫https://www.npmjs.com/package/react-html-parser這將避免dangerouslySetInnerHTML 。 例如，這也意味着如果數組直接來自 API，您就不需要操作它（但無論如何對其進行消毒總是好的做法）。

更新后的代碼如下所示：

import React, { Component } from 'react';
import PROJECTS from '../data/projects';
import ReactHtmlParser from 'react-html-parser';

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

    )
  }
}

export default Projects;