Question

我正在从hackerNews Api检索JSON数据。我收到了以下存储在后端的评论：

projectApp.controller('AppController', function($scope, $http, $filter){

    $scope.editTask = function (task) {
        $scope.task = task;
        $scope.priority = $scope.task.priority;
        var date = new Date($scope.task.limitDate);
        $scope.date = $filter('date')(date, "yyyy-MM-dd");

        window.location = '#/task_list/edit_task/' + $scope.task._id;
    }

});

当我在浏览器视图中呈现以上数据时，特殊字符和html标签显示为JSON中的样子。

有人可以帮忙吗？

Answer 1

您可以使用dangerouslySetInnerHTML属性/指令来告诉react解释html。

示例

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  createMarkup() {
    return {__html: '<h3> this is a header </h3> normal text'};
  }

  render() {
    return (
      <div>
        <div dangerouslySetInnerHTML={this.createMarkup()}></div>
      </div>
    );
  }
}

工作stackblitz

参考：

React documentation

Answer 2

我使用了html-react-parser库，它对我有用。 https://github.com/remarkablemark/html-react-parser#usage

非常感谢@Abdelkarim EL AMEL。感谢您的答复。

从HackerNewsApi后端接收的HTML标签和特殊字符，未在视图中解码

2 个答案: