it-swarm.com.ru

Реагируйте: как загрузить и визуализировать внешний HTML-файл?

Я создаю небольшое приложение для блога, используя React и ​​Redux. В блоге отображается страница постов с заголовком, автором, тегами и описанием поста. При нажатии на заголовок или кнопку "читать дальше" я хочу загрузить и отобразить файл HTML с соответствующим сообщением из папки данных локального проекта со всеми сообщениями.

Redux управляет состоянием блога, загружая исходный файл posts.json с 8 различными записями, включая htmlPath для соответствующего html-файла в папке данных.

15
Intermundos

Я вижу, что у вас есть 2 проблемы, которые нужно решить здесь. Во-первых, как установить innerHTML элемента в React. Другой способ заключается в том, как получить определенный HTML-код для рендеринга в зависимости от заданной переменной (например, текущий маршрут, ввод текстового поля и т.д.).

1. Установка innerHTML элемента

Вы можете сделать это с помощью dangerouslySetInnerHTML. Как следует из названия, оно устанавливает innerHTML указанного элемента на то, что вы указываете ... и да, "опасно" является точным, поскольку оно предназначено, чтобы заставить вас дважды подумать, прежде чем использовать эту функцию.

Официальная документация гласит:

Неправильное использование innerHTML может привести к атаке межсайтового скриптинга (XSS). Обеззараживание пользовательского ввода для отображения, как известно, подвержено ошибкам, а отсутствие надлежащей санитарной обработки является одной из основных причин веб-уязвимостей в Интернете.

Проверьте это Demo или фрагмент ниже.

var Demo = React.createClass({

  getInitialState: function() {
    return {showExternalHTML: false};
  },
  
  render: function() {
    return (
      <div>
        <button onClick={this.toggleExternalHTML}>Toggle Html</button>
        {this.state.showExternalHTML ? <div>
          <div dangerouslySetInnerHTML={this.createMarkup()} ></div>
        </div> : null}
      </div>
    );
  },
  
  toggleExternalHTML: function() {
    this.setState({showExternalHTML: !this.state.showExternalHTML});
  },
  
  createMarkup: function() { 
    return {__html: '<div class="ext">Hello!</div>'};
  }

});

ReactDOM.render(
  <Demo />,
  document.getElementById('container')
);
.ext {
  margin-top: 20px;
  width: 100%;
  height: 100px;
  background: green;
  color: white;
  font-size: 40px;
  text-align: center;
  line-height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>


2. Извлечение HTML из внешнего источника

Обратите внимание, что приведенный выше пример на самом деле не получает HTML из внешнего файла, а вводится непосредственно в виде строки. 

Один из простых способов динамического извлечения файла для выбора - это позволить вашему бэкэнду (например, php) прочитать файл из локальной папки, проанализировать текст и отправить его обратно через запрос AJAX.

Пример

//Your React component
fetchExternalHTML: function(fileName) {
  Ajax.getJSON('/myAPI/getExternalHTML/' + fileName).then(
    response => {
      this.setState({
        extHTML: response
      });
    }, err => {
      //handle your error here
    }
  );
}
17
Chris

В то время как ответ Криса был хорошим, для его работы требовалось еще кое-что покопать. Вот шаги, которые вам нужно предпринять:

Добавьте загрузчик html в ваш проект:

npm i -D html-loader

Добавьте следующее правило в ваш файл webpack.config:

{
  test: /\.(html)$/,
  use: {
    loader: 'html-loader',
    options: {
      attrs: [':data-src']
    }
  }
}

Теперь вы можете импортировать ваш HTML-файл следующим образом:

import React, { Component } from 'react';
import Page from './test.html';
var htmlDoc = {__html: Page};

export default class Doc extends Component {
  constructor(props){
    super(props);
  }

  render(){
     return (<div dangerouslySetInnerHTML={htmlDoc} />)
}}
7
iMad

Вы можете попробовать реагировать шаблоны . Это «лучшее» из доступных. Вы можете иметь свой шаблон как внешний файл и загружать его в любое время, и он будет выглядеть как очаровательный со всеми доступными API React.

Надеюсь, поможет.

0
Pranesh Ravi